Mobile-optimized designs and complex navigation are natural enemies in the wild. But they can work well together if the navigation disappears when it’s not necessary. Here’s how to implement Foundation 5’s side navigation plugin.

1. Download the code.

Off-canvas navigation is a component of Foundation for Sites. Turn it on in the app.scss file or when you download the CSS version.

2. Build Your Side Menu.

We use an <aside> element in these examples, but you can use any block element. Inside the container, write a <ul> to hold the actual links. The resulting container should look like:

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

Depending on if you want your navigation to slide in from the left or right side of the screen, your navigation needs to go inside a container with either:

• class="left-off-canvas-menu"
• class="right-off-canvas-menu"

3. Add your navigation links.

Items in the side navigation plugin are list items with anchor elements:

<li><a href="#">tappable text</a></li>

Organization is part of making complicated navigation easy to manage on mobile devices. To that end, you can divide a long series of links with labels instead of anchors:

<li><label>First group</label></li>

After adding your own links, the side navigation element with many links will look something like this:

<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">

    <li><label>First group</label></li>
    <li><a href="#">aaa</a></li>
    <li><a href="#">bbb</a></li>
    <li><a href="#">ccc</a></li>

    <li><label>Second group</label></li>
    <li><a href="#">ddd</a></li>
    <li><a href="#">eee</a></li>
    <li><a href="#">fff</a></li>

  </ul>
</aside>

4. Add an appropriate trigger.

A trigger is an anchor (sometimes called “a href”) element that users tap to show or hide the side navigation. The code is straightforward: Somewhere outside of the side navigation itself, add a link for users to tap.

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

The span is an element into which Foundation’s CSS automatically embeds a graphic. You can change that to any image or text you decide is appropriate.

Also, direction makes a difference. If your navigation slides in from the left, then the trigger needs to know about it. Choose left or right, and class your trigger and container accordingly.

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

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

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

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

When set up correctly, triggers let users Using side navigation will give users access to navigation without cluttering up your product’s design.

---