Off-canvas

JavaScript

Off-canvas panels are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.

Good news! We've updated Off-canvas to offer more and better functionality. Another bonus is the markup is simplified. This new version applies to version 6.3+. We work hard to avoid breaking changes, so any markup updates are listed in the migration section of this page.

Foundation's Off-canvas is a well established mobile pattern for navigation that can also be used to create a responsive sidebar. It can open from any direction, left, right, top, and bottom. There are options to allow the Off-canvas to push your page over or to overlap your page plus a few other neat tricks.

Setup

Setting up the Off-canvas only requires two elements! To setup the Off-canvas create an off-canvas container with the class .off-canvas and the attribute data-off-canvas. This is the container that holds your Off-canvas content.

The Off-canvas container also needs a positioning class to determine which side of the viewport it opens from:

.position-left
.position-right
.position-top
.position-bottom

Watch this part in video

Also be sure the off-canvas panel has a unique ID so it can be targeted by the click trigger.

Example:

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <!-- Your menu or Off-canvas content goes here -->
</div>

Along with the Off-canvas container, the main content of your page will be housed in its own container with the class .off-canvas-content and attribute data-off-canvas-content. This is where your page content lives.

<div class="off-canvas-content" data-off-canvas-content>
  <!-- Your page content lives here -->
</div>

So putting it all together:

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <!-- Your menu or Off-canvas content goes here -->
  </div>
  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

Wrapper

You can add an optional wrapper around off-canvas and the content. This hides the vertical (on top/bottom off-canvas) or horizontal (on left/right off-canvas) scrollbars the body will have. Simply add a container with the class .off-canvas-wrapper.

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
  </div>
</body>

Click Triggers

To create a click trigger that opens the panel, add the attribute data-open or data-toggle to any element. That element will then open or toggle the panel when clicked on. The value of the data attribute should be the ID of the off-canvas.

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

Close Button

Foundation's Close component can be used inside the off-canvas to close it.

<button class="close-button" aria-label="Close menu" type="button" data-close>
  <span aria-hidden="true">&times;</span>
</button>

Complete Example

Here's a complete example that can be pasted into the <body> tag of your page. It includes a close button and basic menu styles.

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

Off-canvas Position

Foundation's Off-canvas is set to position: fixed by default using the .off-canvas class. This makes the off-canvas panel sit in relation to the viewport, and is the desired behavior for most users. However you can also set an off-canvas container to position: absolute by using the alternative class .off-canvas-absolute. Also be sure to use the .off-canvas-wrapper when using this method.

<button type="button" class="button" data-toggle="offCanvasLeftSplit1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRightSplit2">Open Right</button>

<div class="grid-x grid-margin-x">
  <div class="cell small-6">
    <div class="off-canvas-wrapper">
      <div class="off-canvas-absolute position-left" id="offCanvasLeftSplit1" data-off-canvas>
        <!-- Your menu or Off-canvas content goes here -->
      </div>
      <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>I have nothing to do with the off-canvas on the right!</p>
      </div>
    </div>
  </div>
  <div class="cell small-6">
    <div class="off-canvas-wrapper">
      <div class="off-canvas-absolute position-right" id="offCanvasRightSplit2" data-off-canvas>
        <!-- Your menu or Off-canvas content goes here -->
      </div>
      <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>Im a unique off-canvas container all on my own!</p>
      </div>
    </div>
  </div>
</div>

I have nothing to do with the off-canvas on the right!

Im a unique off-canvas container all on my own!

Off-canvas Directions

Foundation's Off-canvas can open from any direction, left, right, top, and bottom.

The Off-canvas container requires a positioning class to determine which side of the viewport it opens from:

.position-left
.position-right
.position-top
.position-bottom

<button type="button" class="button" data-toggle="offCanvasLeft1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRight1">Open Right</button>
<button type="button" class="button" data-toggle="offCanvasTop1">Open Top</button>
<button type="button" class="button" data-toggle="offCanvasBottom1">Open Bottom</button>

<div class="cell">
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvasLeft1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-right" id="offCanvasRight1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-top" id="offCanvasTop1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-bottom" id="offCanvasBottom1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <img src="https://placehold.it/300x300" class="" height="" width="" alt="">
    </div>
  </div>
</div>

Multiple Panels

A design can have multiple panels. Be sure that all panels come before the .off-canvas-content wrapper—this is required for the CSS to apply correctly.

When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.

<body>
  <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas></div>
  <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas></div>
  <div class="off-canvas-content" data-off-canvas-content></div>
</body>

Off-canvas Transitions

You can switch the default transition of the off-canvas from pushing the page over as it open to overlapping the page by adding the data-transition="overlap" to the .off-canvas. There are 2 available transitions: push (data-transition="push") which is the default, and overlap (data-transition="overlap").

When placing the off-canvas within the off-canvas-content container as Nested Off-Canvas, only overlap transition is possible. If you've explicitely defined push transition it will be replaced with overlap automatically.

<div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
  <!-- Your menu or Off-canvas content goes here -->
</div>
<div class="off-canvas position-right" id="offCanvasRightPush" data-off-canvas data-transition="push">
  <!-- Your menu or Off-canvas content goes here -->
</div>

Reveal on Larger Screens

The left- and right-hand off-canvas panes can be set to be persistent on larger screens like a sidebar. Add the class .reveal-for-medium or .reveal-for-large to the off-canvas menu. These classes determine what breakpoint the off-canvas will default open.

The main content area (.off-canvas-content) will be padded to the left or right equal to the width of the container.

The menu will be fixed-position by default, meaning it follows you as you scroll up and down. The menu also gets its own scroll bar if it's taller than the window. To disable these features, set the $offcanvas-fixed-reveal variable to false.

The slide in/out of the plugin still works when these classes are active. If you use this feature on a larger screen, be sure to hide any click triggers on those larger breakpoints as well. Foundation's visibility classes can help you with that.

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- ... -->
</div>

Combining with Title Bar

If you need a simple bar to contain your hamburger icon/s and toggle the off-canvas, .title-bar is here to help. It supports left- and right-aligned sections. You can add your off-canvas toggle triggers here:

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
    <span class="title-bar-title">Foundation</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
  </div>
</div>

Foundation

When using the `title-bar` with a vertical off-canvas, the title-bar icons are still either `title-bar-left` or `title-bar-right`.

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
    <span class="title-bar-title">Foundation title bar with top off-canvas</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
  </div>
</div>

Foundation title bar with top off-canvas

Off-Canvas (Putting it all together)

For an example of off-canvas, checkout this top bar with off-canvas navigation and dropdowns for submenus building block: https://get.foundation/building-blocks/blocks/multilevel-offcanvas-menu.html

In-Canvas to Off-Canvas

With this feature you can have a standard page element move off-canvas at a particular breakpoint. Use the inCanvasOn option for this. In-Canvas differs from the Reveal on Larger Screens feature as it doesn't actually open the off-canvas for specific screen sizes but overrides the off-canvas styles so it behaves as a regular page element. This way you can place an element anywhere on the page and move it into off-canvas for e.g. small screens only.

The inCanvasOn option will automatically add the .in-canvas-for-[BREAKPOINT] class since most of the work is done via CSS only. However you may also add this class yourself which will override the option.

<button type="button" class="button hide-for-large" data-toggle="inCanvasExample">
  Open in-canvas that is off-canvas now
</button>
<div class="off-canvas position-right" id="inCanvasExample" data-off-canvas data-options="inCanvasOn:large;">
  <div class="callout">I'm in-canvas for medium screen size and move off-canvas for medium down.</div>
</div>

I'm in-canvas for medium screen size and move off-canvas for medium down.

Nested Off-Canvas

In v6.4 the off-canvas component has been heavily extended. Apart from the In-Canvas feature it is now possible to nest the element in the content instead of using it only as a sibling. This is handy if you want to use the same element e.g. for small screens as off-canvas and for large screens as usual page element without duplicate content.

Another improvement is the support of several off-canvas elements that share the same position e.g. two elements with position-left.

Advanced off-canvas users may use the new contentId option to bind an element to a content. This lets you place the element much more flexibly as it may be a sibling of the content, a child or none of it.
Important: when using the contentId on a nested element you must also use the new nested option and tell the JavaScript it's nested!

Please note that it's not possible to use the push transition for a nested off-canvas element.

<button type="button" class="button" data-toggle="offCanvasNestedPush">
  Open Nested Off-Canvas Push
</button>
<button type="button" class="button" data-toggle="offCanvasNestedOverlap">
  Open Nested Off-Canvas Overlap
</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<div class="off-canvas position-left is-closed" id="offCanvasNestedPush" data-off-canvas>
  <div class="callout">
    <p>I'm a nested off-canvas that mustn't be a sibling of the off-canvas content anymore.</p>
    <p>Since push transition is currently not possible for nested elements, I'm forced to use overlayp transition.</p>
  </div>
</div>
<div class="off-canvas position-left is-closed" data-transition="overlap" id="offCanvasNestedOverlap" data-off-canvas>
  <div class="callout">I'm a nested off-canvas that uses overlap transition and the same position as the other nested off-canvas.</div>
</div>

<p>Enim, repudiandae officia dolores temporibus soluta, ipsa saepe tempora ipsum laudantium in mollitia quidem, nisi magni provident hic architecto rem culpa beatae.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

I'm a nested off-canvas that mustn't be a sibling of the off-canvas content anymore.

Since push transition is currently not possible for nested elements, I'm forced to use overlayp transition.

I'm a nested off-canvas that uses overlap transition and the same position as the other nested off-canvas.

Enim, repudiandae officia dolores temporibus soluta, ipsa saepe tempora ipsum laudantium in mollitia quidem, nisi magni provident hic architecto rem culpa beatae.

Off-canvas Scrollbox

Placing scrollable elements within an off-canvas if contentScroll: false is tricky because on touch devices it may become difficult to scroll those elements due to stopped event propagation. There's no continous touch move possible.

However you can still achieve this when you add data-off-canvas-scrollbox to the scrollable elements. Once you've reached the start/end of a scrollbox (while touch moving) the off-canvas will continue scrolling the off-cannvas element. You can optionally use a wrapper with data-off-canvas-scrollbox-outer which gets scrolled instead of the off-canvas element. This is useful when you nest your scrollable elements into other scrollable elements or work with fix heights.

<div class="off-canvas-wrapper">
  <div class="off-canvas-content" data-off-canvas-content style="min-height: 300px;">
    <div class="grid-x">
      <div class="cell">
        <div class="primary callout">
          You have to view this example on a touch device or use e.g. the chrome dev tools with touch emulation.
        </div>
        <button type="button" class="button" data-toggle="offCanvasScrollbox">
          Open Scrollbox Off-canvas
        </button>
      </div>
    </div>
    <div class="off-canvas-absolute position-left" id="offCanvasScrollbox" data-off-canvas data-content-scroll="false">
      <div style="padding: 0 1rem;">
        <article data-off-canvas-scrollbox style="max-height: 290px; overflow: auto; padding: 0.5rem 0; margin-bottom: 1rem; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
          <p>The 1st list supports continuous touchmove</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
        <article style="max-height: 290px; overflow: auto; padding: 0.5rem 0; margin-bottom: 1rem; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
          <p>The 2nd list doesn't support continuous touchmove</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
        <article style="padding: 0.5rem 0;">
          <p>The 3rd list is regular content</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
      </div>
    </div>
  </div>
</div>

You have to view this example on a touch device or use e.g. the chrome dev tools with touch emulation.

The 1st list supports continuous touchmove

bullet 01
bullet 02
bullet 03
bullet 04
bullet 05
bullet 06
bullet 07
bullet 08
bullet 09
bullet 10

The 2nd list doesn't support continuous touchmove

bullet 01
bullet 02
bullet 03
bullet 04
bullet 05
bullet 06
bullet 07
bullet 08
bullet 09
bullet 10

The 3rd list is regular content

bullet 01
bullet 02
bullet 03
bullet 04
bullet 05
bullet 06
bullet 07
bullet 08
bullet 09
bullet 10

Sticky

By default an element with position: fixed disappears when opening an off-canvas with push transition. The reason for this is the transform property of the off-canvas content container what causes a position: absolute behavior for the fixed element.

The good news: we've added the possibility to preserve the fixed appearance! You only have to add the attribute data-off-canvas-sticky to every sticky / fixed element that is supposed to remain fixed after opening the off-canvas.

Please note that using this attribute will force the option `contentScroll: false`

<div class="top-bar sticky" data-sticky data-off-canvas-sticky>
  Sticky top bar that will remain sticky after having opened an off-canvas
</div>

Off-canvas Sizes

In v6.4.2 the type of the off-canvas size variables has changed from number to map. This lets you define breakpoint specific sizes instead of one value for all. The map may contain every key that is defined in $breakpoint-classes.

Please note the sizes maps do currently not work perfectly for the reveal classes. If sizes are defined for medium and large, `.reveal-for-medium` will only consider the medium value. This is going to get fixed in a future release.

$offcanvas-sizes: (
  small: 250px,
  medium: 350px,
);
$offcanvas-vertical-sizes: (
  small: 250px,
  medium: 350px,
);

Migrating from versions prior to v6.4

If you're upgrading from v6.3 there's nothing to do unless you haven't changed the default value of $offcanvas-shadow. Prior to v6.4 this variable was used for both, overlap and push off-canvas elements. Now it's only used for the overlap element whereas the push element uses two new variables:

$offcanvas-inner-shadow-size which is a number (mostly px)
$offcanvas-inner-shadow-color which is a color (mostly rgba)

So if you have changed the default off-canvas shadow you have to adjust the value of these variables in your settings.

Migrating from versions prior to v6.3

`off-canvas-wrapper` and `off-canvas-wrapper-inner` are no longer needed on the new off-canvas. If you leave them in with 6.3+ off-canvas will work as expected.

The default off-canvas position has changed from absolute to fixed. This will likely be the position you want since the menu is in view when opened regardless of the scroll position. You can choose the off-canvas position back to absolute using the built in classes:

.is-overlay-absolute
.is-overlay-fixed

Or in globally in the _settings.scss, set the $offcanvas-fixed-reveal variable to false.

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- ... -->
</div>

Pre 6.3 Off-canvas Setup

To start, create two wrappers to house the page. These are necessary to prevent the off-canvas panels from being visible when they're not open. They also smooth out cross-browser bugs.

The outer wrapper has the class .off-canvas-wrapper.
The inner wrapper has the class .off-canvas-wrapper-inner and the attribute data-off-canvas-wrapper.

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper></div>
  </div>
</body>

Inside these wrappers, create an off-canvas panel with the class .off-canvas and the attribute data-off-canvas. The panel also needs a positioning class, which can be .position-left or .position-right, and an attribute set for the position, data-position="left" or data-position="right". Last, make sure the off-canvas panel has a unique ID so it can be targeted.

Along with the panel, the main content of your page will be housed in its own container with the class .off-canvas-content and attribute data-off-canvas-content. You will be putting your actual page content inside a class of .off-canvas-content.)

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
      <div class="off-canvas-content" data-off-canvas-content></div>
    </div>
  </div>
</body>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$offcanvas-sizes`	Map	`small: 250px`	Width map of a left/right off-canvas panel.
`$offcanvas-vertical-sizes`	Map	`small: 250px`	Height map of a top/bottom off-canvas panel.
`$offcanvas-background`	Color	`$light-gray`	Background color of an off-canvas panel.
`$offcanvas-shadow`	Shadow	`0 0 10px rgba($black, 0.7)`	Box shadow for the off-canvas overlap panel.
`$offcanvas-inner-shadow-size`	Number	`20px`	Inner box shadow size for the off-canvas push panel.
`$offcanvas-inner-shadow-color`	Color	`rgba($black, 0.25)`	Inner box shadow color for the off-canvas push panel.
`$offcanvas-overlay-zindex`	Number	`11`	Z-index of an off-canvas content overlay.
`$offcanvas-push-zindex`	Number	`12`	Z-index of an off-canvas panel with the `push` transition.
`$offcanvas-overlap-zindex`	Number	`13`	Z-index of an off-canvas panel with the `overlap` transition.
`$offcanvas-reveal-zindex`	Number	`12`	Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
`$offcanvas-transition-length`	Number	`0.5s`	Length of the animation on an off-canvas panel.
`$offcanvas-transition-timing`	Keyword	`ease`	Timing function of the animation on an off-canvas panel.
`$offcanvas-fixed-reveal`	Bool	`true`	If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
`$offcanvas-exit-background`	Color	`rgba($white, 0.25)`	Background color for the overlay that appears when an off-canvas panel is open.
`$maincontent-class`		`'off-canvas-content'`	CSS class used for the main content area. The off-canvas mixins use this to target the page content.
`$titlebar-background`	Color	`$black`	Background color of a title bar.
`$titlebar-color`	Color	`$white`	Color of text inside a title bar.
`$titlebar-padding`	Length	`0.5rem`	Padding inside a title bar.
`$titlebar-text-font-weight`	Weight	`bold`	Font weight of text inside a title bar.
`$titlebar-icon-color`	Color	`$white`	Color of menu icons inside a title bar.
`$titlebar-icon-color-hover`	Color	`$medium-gray`	Color of menu icons inside a title bar on hover.
`$titlebar-icon-spacing`	Length	`0.25rem`	Spacing between the menu icon and text inside a title bar.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

off-canvas-basics

@include off-canvas-basics;

Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.

off-canvas-base

@include off-canvas-base;

Adds basic styles for an off-canvas panel.

off-canvas-position

@include off-canvas-position;

Adds styles to position an off-canvas panel to the left/right/top/bottom.

off-canvas-content

@include off-canvas-content;

Sets the styles for the content container.

off-canvas-reveal

@include off-canvas-reveal;

Adds styles that reveal an off-canvas panel.

in-canvas

@include in-canvas;

Overrides the off-canvas styles

JavaScript Reference

Initializing

The following files must be included in your JavaScript to use this plugin:

foundation.core.js
foundation.offcanvas.js
- With utility library foundation.util.keyboard.js
- With utility library foundation.util.mediaQuery.js
- With utility library foundation.util.triggers.js

Foundation.OffCanvas

Creates a new instance of an off-canvas wrapper.

var elem = new Foundation.OffCanvas(element, options);

Fires these events: OffCanvas#event:init

Name	Type	Description
`element`	Object	jQuery object to initialize.
`options`	Object	Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Off-canvas. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name	Type	Default	Description
`data-close-on-click`	`boolean`	`true`	Allow the user to click outside of the menu to close it.
`data-content-overlay`	`boolean`	`true`	Adds an overlay on top of `[data-off-canvas-content]`.
`data-content-id`	`string`	`null`	Target an off-canvas content container by ID that may be placed anywhere. If null the closest content container will be taken.
`data-nested`	`boolean`	`null`	Define the off-canvas element is nested in an off-canvas content. This is required when using the contentId option for a nested element.
`data-content-scroll`	`boolean`	`true`	Enable/disable scrolling of the main content when an off canvas panel is open.
`data-transition-time`	`string`	`null`	Amount of time the open and close transition requires, including the appropriate milliseconds (`ms`) or seconds (`s`) unit (e.g. `500ms`, `.75s`) If none selected, pulls from body style.
`data-transition`	`string`	`push`	Type of transition for the OffCanvas menu. Options are 'push', 'detached' or 'slide'.
`data-force-to`	`string`	`null`	Force the page to scroll to top or bottom on open.
`data-is-revealed`	`boolean`	`false`	Allow the OffCanvas to remain open for certain breakpoints.
`data-reveal-on`	`string`	`null`	Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.
`data-in-canvas-on`	`string`	`null`	Breakpoint at which the off-canvas gets moved into canvas content and acts as regular page element.
`data-auto-focus`	`boolean`	`true`	Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
`data-reveal-class`	`string`	`reveal-for-`	Class used to force an OffCanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
`data-trap-focus`	`boolean`	`false`	Triggers optional focus trapping when opening an OffCanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.

Events

These events will fire from any element with a Off-canvas plugin attached.

Name	Description
`opened.zf.offCanvas`	Fires when the off-canvas menu opens.
`openedEnd.zf.offCanvas`	Fires when the off-canvas menu open transition is done.
`close.zf.offCanvas`	Fires when the off-canvas menu closes.
`closed.zf.offCanvas`	Fires when the off-canvas menu close transition is done.

Methods

reveal

$('#element').foundation('reveal', isRevealed);

Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.

Name	Type	Description
`isRevealed`	Boolean	true if element should be revealed.

open

$('#element').foundation('open', event, trigger);

Opens the off-canvas menu.

Fires these events: OffCanvas#event:opened

Name	Type	Description
`event`	Object	Event object passed from listener.
`trigger`	jQuery	element that triggered the off-canvas to open.

close

$('#element').foundation('close', cb);

Closes the off-canvas menu.

Fires these events: OffCanvas#event:close OffCanvas#event:closed

Name	Type	Description
`cb`	function	optional cb to fire after closure.

toggle

$('#element').foundation('toggle', event, trigger);

Toggles the off-canvas menu open or closed.

Name	Type	Description
`event`	Object	Event object passed from listener.
`trigger`	jQuery	element that triggered the off-canvas to open.

_destroy

$('#element').foundation('_destroy');

Destroys the OffCanvas plugin.