This is how an off-canvas menu works: The user clicks an icon or performs some sort of action (e.g. swiping left to right on a touchscreen device) that results in a vertical navigation menu sliding into the screen from off canvas. A popular icon that denotes the availability of an off-canvas menu on a website is called the navicon.
The navicon looks like a set of three stacked lines: This icon is also called the “hamburger menu icon” because, well, it kind of resembles the outline of a hamburger. You don’t necessarily need to use a navicon as the trigger of your off-canvas menu; you can also use a button labeled with a conventional term like “Menu”. This might even be a better option; the results of one A/B test by web publishing company Exis suggest Internet users still aren’t familiar with the navicon. By the way, another term for off-canvas menu is navigation drawer, but the latter is associated specifically with Android development. They both work the same way though.
When to Use the Off-Canvas Menu Design Pattern
In general, the off-canvas menu design pattern is a great option for responsive websites that need to display a lot of links that wouldn’t otherwise fit in a traditional top horizontal navigation bar. To explore this point, let’s talk about a couple of cases where an off-canvas menu is a good choice.
Menus with Many Links
To me, the top horizontal navigation bar is still the most familiar type of site navigation menu.
It’s what Internet users are accustomed to, especially those of us who didn’t grow up with mobile touchscreen devices. But some sites need more room than the width of their layout allows. In this instance, an off-canvas menu can be implemented as a solution to the problem.
Below, you can see the TIME website’s off-canvas menu: Because the site’s menu has a lot of links, the off-canvas menu is a good option here. The menu’s content is so extensive that it even requires its own a scroll bar.
Menus with Categories
A vertical navigation menu on the left or right of the site’s layout is a good way of presenting links that are organized into categories because the user can quickly see all the available links at a glance.
Here’s a vertical navigation menu with categories, found on Zappos, for your reference: Compare the vertical navigation menu to the dropdown menu design pattern, another way of designing a menu that has categories. Dropdown menus don’t allow us to access all the links in one view or action. So if a user isn’t sure where a particular link might be under, he’ll have to scroll through several categories until he finds the one he’s looking for: A vertical navigation layout is great for a menu that organizes its links in categories.
It’s almost perfect. But it takes up a lot screen space, which isn’t an issue when the user is rocking a 36” widescreen computer monitor, but it will quickly become one when she switches to her mobile device. The off-canvas menu design pattern addresses the issue by using the concept of progressive disclosure; the menu is only displayed when the user wants to see it.
Examples of the Off-Canvas Menu Design Pattern
Below, you’ll find a variety of ways a few websites have implemented the off-canvas menu design pattern.
- Implementing Off-Canvas Navigation for a Responsive Website (smashingmagazine.com)
- CSS and jQuery Sliding Drawer Navigation Tutorial, Android Look-Alike (codeofaninja.com)
- Off Canvas Menu with CSS :target (css-tricks.com)
- Side Drawer Navigation Could Cost Half Your User Engagement (thenextweb.com)
- Off the Beaten Canvas: Exploring The Potential of the Off-Canvas Pattern (smashingmagazine.com)
- Interesting UI Concept: Navicon Transformicons
Table of Contents
- 7 Websites for Sketchbook Inspiration
- The Day's Color: A Site for Daily Color Inspiration
- 10 Myths about Startups
- Incredibly Colorful Art Marker Illustrations by Fudearashi
- Incredible Concept Artwork Re-Imagines Future Japan
- Pop-Deco Vector Illustrations by Orlando Arocena
- Time-Lapse Artwork: Artists Show You How It's Done
- Ink-redible, Mistake-Free Illustrations by DZO Olivier
- 365-Day Geometric Illustration Challenge by Justin Maller
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.