Off-canvas

JavaScript

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.

Setup

To start, create two wrappers to house the page. These are necessary to prevent the off-canvas menus 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 wrapper, create an off-canvas menu with the class .off-canvas and the attribute data-off-canvas. The menu also needs a positioning class, which can be .position-left or .position-right. Lastly, make sure the off-canvas has a unique ID so it can be targeted.

Along with the menu, 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.

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

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-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <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>
        <!-- Page content -->
      </div>
    </div>
  </div>
</body>

Click Triggers

To create a click trigger that opens the menu, add the attribute data-open or data-toggle to any element. That element will then open or toggle the menu 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>

Multiple Menus

A design can have two menus: one on the left, and one on the right. Be sure that both menus 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-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas></div>
      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right"></div>
      <div class="off-canvas-content" data-off-canvas-content></div>
    </div>
  </div>
</body>

Title Bar

If you need a simple title bar to toggle the off-canvas, .title-bar is here to help. It supports left- and right-aligned sections.

<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

Responsive Off-Canvas (Putting it all together)

For an example of off-canvas on small screens and Top Bar Menu with Dropdowns, check out this Building Block: http://zurb.com/building-blocks/top-bar-with-off-canvas

Reveal on Larger Screens

The left- and right-hand off-canvas panes can be set to be persistent on larger screens. Add the class .reveal-for-medium or .reveal-for-large to the off-canvas menu.

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>

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-size`	Number	`250px`	Width of an off-canvas menu.
`$offcanvas-background`	Color	`$light-gray`	Background color of an off-canvas menu.
`$offcanvas-zindex`	Number	`-1`	Z-index of an off-canvas menu.
`$offcanvas-transition-length`	Number	`0.5s`	Length of the animation on an off-canvas menu.
`$offcanvas-transition-timing`	Keyword	`ease`	Timing function of the animation on an off-canvas menu.
`$offcanvas-fixed-reveal`		`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 menu 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 body.
`$maincontent-shadow`	Shadow	`0 0 10px rgba($black, 0.5)`	Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
`$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 menu.

off-canvas-reveal

@include off-canvas-reveal($position);

Adds styles that reveal an off-canvas menu.

Parameter	Type	Default Value	Description
`$position`	Keyword	`left`	Position of the off-canvas menu being revealed.

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.mediaQuery.js
- With utility library foundation.util.triggers.js
- With utility library foundation.util.motion.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`			Allow the user to click outside of the menu to close it.
`data-transition-time`			Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
`data-position`			Direction the offcanvas opens from. Determines class applied to body.
`data-force-top`			Force the page to scroll to top on open.
`data-is-revealed`			Allow the offcanvas to remain open for certain breakpoints.
`data-reveal-on`			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-auto-focus`			Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
`data-reveal-class`			Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
`data-trap-focus`			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.
`closed.zf.offCanvas`	Fires when the off-canvas menu opens.

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

Off-canvas

Setup

Click Triggers

Multiple Menus

Title Bar

Responsive Off-Canvas (Putting it all together)

Reveal on Larger Screens

Sass Reference

Variables

Mixins

off-canvas-basics

off-canvas-base

off-canvas-reveal

JavaScript Reference

Initializing

Foundation.OffCanvas

Plugin Options

Events

Methods

reveal

open

close

toggle

destroy

Let's build something amazing.

Foundation for Sites

Want more?

Talk to us

Stay Updated

Setup

Click Triggers

Multiple Menus

Title Bar

Responsive Off-Canvas (Putting it all together)

Reveal on Larger Screens

Sass Reference

Variables

Mixins

off-canvas-basics

off-canvas-base

off-canvas-reveal

JavaScript Reference

Initializing

Foundation.OffCanvas

Plugin Options

Events

Methods

reveal

open

close

toggle

destroy

Let's build something amazing.

Stay on top of what’s happening in responsive design.

Foundation for Sites

Want more?

Talk to us

Stay Updated