@ithaka/bonsai/documentation/pages/components/off-canvas.md

ITHAKA core styling

---
title: Off Canvas Menu
description: Off-canvas menus are positioned outside of the viewport and slide in when activated. This menu should only be used for smaller view ports on mobile devices.
foundation: http://foundation.zurb.com/sites/docs/off-canvas.html
sass: ./scss/_offcanvas.scss
js: ./js/bonsai.offcanvas.js
---

## How to Use

### Side navigation
The `data-off-canvas` attribute indicates the content that will be displayed when off canvas is toggled on.

```html_example
<button type="button" class="button" data-toggle="offCanvas">Show Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <ul class="vertical menu">
        <li>
            <a href="#" class="small-heading">List of Options</a>
            <ul class="submenu menu vertical">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li><a href="#">Option 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="small-heading">Another List of Options</a>
            <ul class="submenu menu vertical">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
            </ul>
        </li>
    </ul>
</div>
```

### On screen right
Off canvas component can be used within the page. The `off-canvas-wrapper` and `off-canvas-absolute` classes facilitate this functionality.

```html_example
<button type="button" class="button" data-toggle="offCanvasRight">Open Right</button>
<div class="off-canvas-wrapper">
    <div class="off-canvas-absolute position-right" id="offCanvasRight" data-off-canvas>
        <ul class="vertical menu">
            <li><a href="#">Menu option 1</a></li>
            <li><a href="#">Menu option 2</a></li>
            <li><a href="#">Menu option 3</a></li>
        </ul>
    </div>
    <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>I'm a unique off-canvas container all on my own!</p>
    </div>
</div>
```

## Guidelines
1. We are using the off canvas nav for mobile and small screen use cases.
1. Make sure section headers have a class that distinguishes them from subsections.
1. You can use `data-transition="push"` or `data-transition="overlap"` to change the way the off canvas interacts with the visible content. We use `push` for the library portal and about site

## Accessibility
1. Ensure that the off canvas components are keyboard accessible. Users should be able to tab through each link as well as selecting the link via the keyboard.
1. Make sure there is enough space between links that are finger friendly touch targets.

## Avoid
1. On the JSTOR site we have not used off-canvas nav's except as mobile menus.
1. When possible, avoid using an off-canvas nav within the page, use as a full page component.