---
title: Off-canvas navigation
layout: doc/layouts/default.html
---
# Off Canvas
Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.
***
{{> examples_offcanvas_basic}}
***
## Basic
You can create a basic, unstyled off-canvas menu with just a little bit of markup. Here's how:
HTML
{{> examples_offcanvas_minimal_markup}}
Rendered HTML
{{> examples_offcanvas_minimal_rendered}}
The basics of Off Canvas are pretty simple. The off-canvas layout is wrapped in `.off-canvas-wrap`. Next comes `.inner-wrap`. You also need to include the menu itself, which is `.left-off-canvas-menu` or `.right-off-canvas-menu`. You need a corresponding target for your off-canvas menu, either `.left-off-canvas-toggle` or `.right-off-canvas-toggle`. Finally, be sure to include `.exit-off-canvas` so your users can get back to the main page!
### Off-Canvas Wrap
This is the outer-most element. It contains the entire off-canvas layout and hides overflows.
HTML
```html
```
### Inner Wrap
This is the element that is animated. All of your page content needs to be inside here.
HTML
```html
```
### Off-Canvas Menu
This is the panel that slides in and out when activated. You can place it on either the left or the right side. You can even create menus on both sides!
HTML
```html
```
### Target Off-Canvas Menu
To target an off-canvas menu, add `.left-off-canvas-toggle` or `.right-off-canvas-toggle` to your layout. Clicking on these will activate their corresponding menu.
HTML
```html
Left MenuRight Menu
```
### Exit Off-Canvas Menu
Include `.exit-off-canvas` to provide a way back to the main page. This is an overlay that covers the `.inner-wrap` when an off-canvas menu is active. Clicking on it will deactivate the off-canvas menu.
HTML
```html
```
***
## Advanced
Using our pre-built components, you can create an awesome off-canvas menu right out of the box.
HTML
{{> examples_offcanvas_multiple_markup}}
Rendered HTML
{{> examples_offcanvas_multiple_rendered}}
### Tab Bar Container
We've provided a simple navigation pattern called Tab Bar. It's a very plain component, designed to be easily customizable. First, we need to add the tab bar container: `nav.tab-bar`.
HTML
```html
```
### Button Containers
The button containers, `section.left-small` and `section.right-small`, contain the toggle buttons.
HTML
```html
```
### Menu Icon
To add the nice hamburger icon that everyone knows and loves, add a class of `.menu-icon` to your menu target, and nest a `span` inside of it.
```html
```
Now put it all together...
HTML
```html
```
...and here's what you'll get:
### Tab Bar Section
The last thing we need is a section for the tab bar content. Add `section.tab-bar-section` inside `nav.tab-bar`.
HTML
```html
```
Add a class of `.left`, `.right`, or `.middle` depending on which space you want the section to occupy. For example, if you have a Button Container on the left, add the class `.right`.
HTML
```html
```
### Off-Canvas List
We've included a nice list pattern for list in the off-canvas menu. Include `ul.off-canvas-list` inside your off-canvas menu. For section titles, wrap the `li` contents in a `label`.