Off Canvas

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

Imagine a speaker for every room.

Sonos wireless speakers are custom designed for every space in your home. From the compact PLAY:1 to the TV-compatible PLAYBAR, our line-up fills any room with crystal clear HiFi sound at any volume.

Go Wireless

Set up Sonos with the push of a button. Our unique technology brings your entire home audio system together on a dedicated wireless network. The end result? Unrivaled performance and zero drop-outs.

Control every room, from any device.

The Sonos Controller App lets you browse and play your music from any device. Use your smartphone, tablet, or computer to stream different songs in each room, group rooms together, or hear the same beat everywhere.

Play your favorite songs. Stream your favorite services.

Listen to all the music you love, no matter where it lives – think iTunes, podcasts, radio stations, Spotify, Pandora, etc. With streaming music services, use your smartphone, tablet, or computer to control apps from the cloud.

Basic

You can create a basic, unstyled off-canvas menu with just a little bit of markup. Here's how:

Menu

Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

The building blocks

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
<div class="off-canvas-wrap" data-offcanvas>
  <!-- page layout goes here -->
</div>

Inner Wrap

This is the element that is animated. All of your page content needs to be inside here.

HTML
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <!-- all content goes here -->
  </div>
</div>

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
<aside class="left-off-canvas-menu">
  <!-- put your links in here -->
</aside>
<aside class="right-off-canvas-menu">
  <!-- put your links in here -->
</aside>

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
<!-- target the leftside menu -->
<a class="left-off-canvas-toggle">Left Menu</a>


<!-- target the rightside menu -->
<a class="right-off-canvas-toggle">Right Menu</a>


<aside class="left-off-canvas-menu"></aside>
<aside class="right-off-canvas-menu"></aside>

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
<a class="exit-off-canvas"></a>

Advanced

Using pre-built components, you can create an awesome off-canvas menu right out of the box.

Imagine a speaker for every room.

Sonos wireless speakers are custom designed for every space in your home. From the compact PLAY:1 to the TV-compatible PLAYBAR, our line-up fills any room with crystal clear HiFi sound at any volume.

Go Wireless

Set up Sonos with the push of a button. Our unique technology brings your entire home audio system together on a dedicated wireless network. The end result? Unrivaled performance and zero drop-outs.

Control every room, from any device.

The Sonos Controller App lets you browse and play your music from any device. Use your smartphone, tablet, or computer to stream different songs in each room, group rooms together, or hear the same beat everywhere.

Play your favorite songs. Stream your favorite services.

Listen to all the music you love, no matter where it lives – think iTunes, podcasts, radio stations, Spotify, Pandora, etc. With streaming music services, use your smartphone, tablet, or computer to control apps from the cloud.


Light Class

Use the current sonos.com light style by adding the classes .off-canvas-wrap.sonos-off-canvas-wrap, aside.right-off-canvas-menu.light, aside.left-off-canvas-menu.light, and nav.tab-bar.sonos-tab-bar.light

Imagine a speaker for every room.

Sonos wireless speakers are custom designed for every space in your home. From the compact PLAY:1 to the TV-compatible PLAYBAR, our line-up fills any room with crystal clear HiFi sound at any volume.

Go Wireless

Set up Sonos with the push of a button. Our unique technology brings your entire home audio system together on a dedicated wireless network. The end result? Unrivaled performance and zero drop-outs.

Control every room, from any device.

The Sonos Controller App lets you browse and play your music from any device. Use your smartphone, tablet, or computer to stream different songs in each room, group rooms together, or hear the same beat everywhere.

Play your favorite songs. Stream your favorite services.

Listen to all the music you love, no matter where it lives – think iTunes, podcasts, radio stations, Spotify, Pandora, etc. With streaming music services, use your smartphone, tablet, or computer to control apps from the cloud.


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
<nav class="tab-bar"></nav>

Button Containers

The button containers, section.left-small and section.right-small, contain the toggle buttons.

HTML
<nav class="tab-bar">
  <section class="left-small"></section>
  <section class="right-small"></section>
</nav>

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.

<a class="right-off-canvas-toggle menu-icon"><span></span></a>

Now put it all together...


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.

<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
  <section class="middle tab-bar-section">
    <h1 class="title">Foundation</h1>
  </section>
  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
</nav>

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.

<nav class="tab-bar">
  <section class="left-small"></section>
  <section class="right tab-bar-section"><!-- I stretch all the way to the right --></section>
</nav>


<nav class="tab-bar">
  <section class="left-small"></section>
  <section class="middle tab-bar-section"><!-- I'm in the middle --></section>
  <section class="right-small"></section>
</nav>


<nav class="tab-bar">
  <section class="left tab-bar-section"><!-- I stretch all the way to the left --></section>
  <section class="right-small"></section>
</nav>


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.


Optional JavaScript Configuration

$(document).foundation({
  offcanvas: {
    open_method: 'move', // Can also be 'overlap'
    close_on_click: true
  }
});

Event Bindings

There are a series of events that you can bind to for triggering callbacks:

$(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:

$(document)
  .on('open.fndtn.offcanvas', '[data-offcanvas]', function() {
    $('html').css('overflow', 'hidden');
  })
  .on('close.fndtn.offcanvas', '[data-offcanvas]', function() {
    $('html').css('overflow', 'auto');
  });

Programmatic open / close / toggle

The .off-canvas-wrap container can be targetd for javascript methods. At this time, the presentational open class needs to be included: either move-right, move-left, or offcanvas-overlap.

$('.off-canvas-wrap').foundation('offcanvas', 'open', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'close', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');