--- title: Off Canvas meta: Off-canvas navigation ---

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 Menu Right 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`. This will allow you to place the text (link) on the tabbar more to the left, right, or middle.

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`.

HTML

{{#markdown}} ```html ``` {{/markdown}}

Rendered HTML

*** ## Customize With Sass Off-canvas layouts can be easily customized using our provided Sass variables.

SCSS

{{> examples_offcanvas_variables}} *** ### Using the Javascript
Before you can use Off-canvas you'll want to verify that jQuery and `foundation.js` are available on your page. You can refer to the [Javascript documentation](../javascript.html) on setting that up.
Just add `foundation.offcanvas.js` AFTER the `foundation.js` file. Your markup should look something like this: {{#markdown}} ```html ... ``` {{/markdown}} Required Foundation Library: `foundation.offcanvas.js` *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

{{#markdown}} ```scss @import "foundation/components/offcanvas"; ``` {{/markdown}}