Foundation Documentation

Off-canvas

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.


The Psychohistorians

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.

Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.

Basic

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

HTML

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" href="#" >Menu</a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->
    <p>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.</p>

  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>

Rendered HTML

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 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"><!-- 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">
  <!-- If the contents of the .inner-wrap isn't the main content of the page, use another approripate sectioning element instead -->
  <main class="inner-wrap"><!-- all content goes here --></main>
</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

<nav class="left-off-canvas-menu"><!-- put your links in here --></nav>
<nav class="right-off-canvas-menu"><!-- put your links in here --></nav>

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 href="idOfLeftMenu" role="button" class="left-off-canvas-toggle">Left Menu</a>
<!-- target the rightside menu -->
<a href="idOfRightMenu" role="button" class="right-off-canvas-toggle">Right Menu</a>

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

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

<button class="exit-off-canvas"></button>

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

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><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" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

Rendered HTML


The Psychohistorians

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.

Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.

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


<div class="off-canvas-wrap docs-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

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

      <section class="left-small">
        <a class="bottom-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

    </nav>

    <aside class="top-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
        <li><label>Foundation and Empire</label></li>
        <li><a href="#">The General</a></li>
        <li><a href="#">The Mule</a></li>
        <li><label>Second Foundation</label></li>
        <li><a href="#">Search by the Mule</a></li>
        <li><a href="#">Search by the Foundation</a></li>
      </ul>
    </aside>

    <aside class="bottom-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
        <li><label>Foundation and Empire</label></li>
        <li><a href="#">The General</a></li>
        <li><a href="#">The Mule</a></li>
        <li><label>Second Foundation</label></li>
        <li><a href="#">Search by the Mule</a></li>
        <li><a href="#">Search by the Foundation</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <div class="row">
        <div class="large-12 columns">
          <br/>
          <h4 class="">The Psychohistorians</h4>

          <p>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.</p>

          <p>Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.</p>

        </div>
      </div>
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

Rendered HTML


The Psychohistorians

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.

Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.

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

<nav class="tab-bar"></nav>

Button Containers

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

HTML

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

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 role="button" href="#idOfRightMenu" class="right-off-canvas-toggle menu-icon" ><span></span></a>

Now put it all together...

HTML

<nav class="tab-bar">

  <div class="left-small">
    <a href="#idOfLeftMenu" role="button" aria-controls="idOfLeftMenu" aria-expanded="false" class="left-off-canvas-toggle menu-icon" ><span></span></a>
  </div>
  <div class="right-small">
    <a href="#idOfRightMenu" role="button" aria-controls="idOfRightMenu" aria-expanded="false" class="right-off-canvas-toggle menu-icon" ><span></span></a>
  </div>
</nav>

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

<nav class="tab-bar">
  <div class="left-small">
    <a role="button" aria-expanded="false" aria-controls="idOfLeftMenu" class="left-off-canvas-toggle menu-icon" ><span></span></a>
  </div>
  <section class="middle tab-bar-section">
    <h1 class="title">Foundation</h1>
  </section>
  <div class="right-small">
    <a role="button" aria-expanded="false" aria-controls="idOfRightMenu" class="right-off-canvas-toggle menu-icon" ><span></span></a>
  </div>
</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. This will allow you to place the text (link) on the tabbar more to the left, right, or middle.

HTML

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

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

<nav class="tab-bar">
  <div class="right tab-bar-section"><!-- I stretch all the way to the left --></div>
  <div class="right-small"></div>
</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.

HTML

<nav class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>Foundation</label></li>
    <li><a href="#">The Psychohistorians</a></li>
    <li><a href="#">The Encyclopedists</a></li>
    <li><a href="#">The Mayors</a></li>
    <li><a href="#">The Traders</a></li>
    <li><a href="#">The Merchant Princes</a></li>
  </ul>
</nav>

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

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <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>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li class="has-submenu"><a href="#">The Psychohistorians</a>
            <ul class="left-submenu">
                <li class="back"><a href="#">Back</a></li>
                <li><label>Level 1</label></li>
                <li><a href="#">Link 1</a></li>
                <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                    <ul class="left-submenu">
                        <li class="back"><a href="#">Back</a></li>
                        <li><label>Level 2</label></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">The Encyclopedists</a></li>
        <li><a href="#">The Mayors</a></li>
        <li><a href="#">The Traders</a></li>
        <li><a href="#">The Merchant Princes</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li class="has-submenu"><a href="#">R. Giskard Reventlov</a>
            <ul class="right-submenu">
                <li class="back"><a href="#">Back</a></li>
                <li><label>Level 1</label></li>
                <li><a href="#">Link 1</a></li>
                <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                    <ul class="right-submenu">
                        <li class="back"><a href="#">Back</a></li>
                        <li><label>Level 2</label></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

Rendered HTML


The Psychohistorians

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.

Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.

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

// Off Canvas Tab Bar Variables
$include-html-off-canvas-classes: $include-html-classes !default;

$tabbar-bg: $oil !default;
$tabbar-height: rem-calc(45) !default;
$tabbar-icon-width: $tabbar-height !default;
$tabbar-line-height: $tabbar-height !default;
$tabbar-color: $white !default;
$tabbar-middle-padding: 0 rem-calc(10) !default;

// Off Canvas Divider Styles
$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default;
$tabbar-right-section-border: $tabbar-left-section-border;


// Off Canvas Tab Bar Headers
$tabbar-header-color: $white !default;
$tabbar-header-weight: $font-weight-bold !default;
$tabbar-header-line-height: $tabbar-height !default;
$tabbar-header-margin: 0 !default;

// Off Canvas Menu Variables
$off-canvas-width: rem-calc(250) !default;
$off-canvas-bg: $oil !default;
$off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
$off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);

// Off Canvas Menu List Variables
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
$off-canvas-label-color: $aluminum !default;
$off-canvas-label-text-transform: uppercase !default;
$off-canvas-label-font-size: rem-calc(12) !default;
$off-canvas-label-font-weight: $font-weight-bold !default;
$off-canvas-label-bg: $tuatara !default;
$off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
$off-canvas-label-border-bottom: none !default;
$off-canvas-label-margin:0 !default;
$off-canvas-link-padding: rem-calc(10, 15) !default;
$off-canvas-link-color: rgba($white, 0.7) !default;
$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
$off-canvas-back-bg: #444 !default;
$off-canvas-back-border-top: $off-canvas-label-border-top !default;
$off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default;
$off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default;
$off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
$off-canvas-back-hover-border-bottom: none !default;

// Off Canvas Menu Icon Variables
$tabbar-menu-icon-color: $white !default;
$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;

$tabbar-menu-icon-text-indent: rem-calc(35) !default;
$tabbar-menu-icon-width: $tabbar-icon-width !default;
$tabbar-menu-icon-height: $tabbar-height !default;
$tabbar-menu-icon-padding: 0 !default;

$tabbar-hamburger-icon-width: rem-calc(16) !default;
$tabbar-hamburger-icon-left: false !default;
$tabbar-hamburger-icon-top: false !default;
$tabbar-hamburger-icon-thickness: 1px !default;
$tabbar-hamburger-icon-gap: 6px !default;

// Off Canvas Back-Link Overlay
$off-canvas-overlay-transition: background 300ms ease !default;
$off-canvas-overlay-cursor: pointer !default;
$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default;
$off-canvas-overlay-background: rgba($white, 0.2) !default;
$off-canvas-overlay-background-hover: rgba($white, 0.05) !default;

// Transition Variables
$menu-slide: "transform 500ms ease" !default;

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 on setting that up.

Just add foundation.offcanvas.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.offcanvas.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>

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.

$(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'move', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});

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.

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

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

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('offcanvas', 'reflow');

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/offcanvas";



Building Blocks Using Off-canvas


Want more? Check out all the hot Building Blocks ⇨

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

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

Foundation for Sites

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

Want more?

Talk to us

Tweet us at
@ZURBfoundation

Business Support

Or check our support page

Stay Updated

Keep up with the latest on Foundation. Find us on Github.

Stay Connected
Studios Helping more than 200 startups succeed since 1998.
Foundation The most advanced front-end framework in the world.
Notable Design Apps Prototype, iterate and collect feedback on your products.
University Ideas, thoughts and design resources shared with you.

© 1998‐2015 ZURB, Inc. All rights reserved.