--- title: Off-canvas meta: Off-canvas navigation layout: component.html ---

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. You can specify `right-off-canvas-toggle` or `left-off-canvas-toggle` and/or `left-off-canvas-menu` and `right-off-canvas-menu`.

HTML

{{> examples_offcanvas_multiple_markup}}

Rendered HTML

{{> examples_offcanvas_multiple_rendered}}
### Off-canvas from any direction In addition to left and right off-canvas menus, you can also have top or bottom off-canvas's as well. Notice, the menu icons are still either left or right, but the off-canvas can be set to `top-off-canvas-menu` and/or `bottom-off-canvas-menu`.

HTML

{{#markdown}} ```html {{> examples_offcanvas_top-bottom}} ``` {{/markdown}}

Rendered HTML

{{> examples_offcanvas_top-bottom}}
Note: Top and Bottom not currently compatible with multi-level off-canvas. A pull request would really help here. ### 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, `div.left-small` and `div.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

  ### Off-Canvas Multilevel Menu We've included a nice multilevel pattern for list in the off-canvas menu. Add a `li.has-submenu` and include `ul.left-submenu` or `ul.right-submenu` within to start to define a submenu, later add a `li.back` element inside this new list. This supports multiple level of submenus.

HTML

{{> examples_offcanvas_multiple_level_markup}}

Rendered HTML

{{> examples_offcanvas_multiple_level_rendered}}
*** ## Accessibility The off-canvas menu is not yet fully accessible. Because it's tucked away off-screen but not totally hidden, the user's browser will still tab through each item, and screen readers will read each item in the navigation. However, the off-canvas menu will not appear when focused with the keyboard. If your page has two primary navigation menus, perhaps a horizontal one for larger screens and an off-canvas menu for small screens, it's best to hide one so screen readers won't read through two whole navigation menus. Add the attribute `aria-hidden="true"` to the container of one navigation, which will tell assistive devices to skip it entirely. The multi-level off-canvas menu, being a relatively recent addition to Foundation, is also not yet fully accessible. The browser will tab through the top-level menu items, but not drill down into any of the sub menus. *** ## 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` *** ### Optional Javascript Configuration **open_method**
Default: `move`
Defines how the off-canvas menu behaves. Can be `move` `overlap_single` or `overlap`. **close_on_click**
Default: `false`
Control whether or not clicking menu links will close the menu. {{> examples_offcanvas_javascript_options}} ### Event Bindings There are a series of events that you can bind to for triggering callbacks:

Deprecation Notice

Previous versions of the off-canvas plugin emitted un-namespaced `open` and `close` events, however, these have been replaced by the namespaced `open.fndtn.offcanvas` and `close.fndtn.offcanvas` events. The un-namespaced events have been fully deprecated.

```js $(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function () { var off_canvas_wrap = $(this); }); $(document).on('close.fndtn.offcanvas', '[data-offcanvas]', function () { var off_canvas_wrap = $(this); }); ``` For example, to freeze scrolling when active: ```js $(document) .on('open.fndtn.offcanvas', '[data-offcanvas]', function() { $('html').css('overflow', 'hidden'); }) .on('close.fndtn.offcanvas', '[data-offcanvas]', function() { $('html').css('overflow', 'auto'); }) ``` ### Programmatic show / hide / toggle The `.off-canvas-wrap` container can be targeted for javascript methods. At this time, the presentational open class needs to be included: either `move-right`, `move-left`, `offcanvas-overlap-left`, `offcanvas-overlap-right` or `offcanvas-overlap`. ```js $('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right'); $('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right'); $('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right'); ``` *** ### Adding Off-canvas After Page Load If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following: {{#markdown}} ```javascript $(document).foundation(); ``` {{/markdown}} Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. {{#markdown}} ```javascript $(document).foundation('offcanvas', 'reflow'); ``` {{/markdown}} *** ### 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}}