Intro to Foundation | Lesson #18
Using Off-Canvas Navigation
Learn to integrate complicated navigation in mobile device design.
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.
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:
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:
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:
After adding your own links, the side navigation element with many links will look something like this:
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>
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.
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
<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.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.