Skip to main content ↓
A Look at the Off-Canvas Menu Design Pattern

A Look at the Off-Canvas Menu Design Pattern

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. Live demo of Off-canvas This off canvas demo is a good example of the design pattern in action 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: Navicon 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. Navicon alternative 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: TIME magazine'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: vertical navigation menu example on Zappos 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: Visual of a drop-down menuIn this hypothetical scenario, it took four user actions to find the target link 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. Off-canvas menu example: AWARDAWARD Off-canvas menu example: SF/ARTSSF/ARTS Off-canvas menu example: VisageVisage Off-canvas menu example: The Verge 50The Verge 50 Off-canvas menu example: Petr OgurcakPetr Ogurcak Off-canvas menu example: Ashley HarppAshley Harpp Off-canvas menu example: Buckingham Design AssociatesBuckingham Design Associates Off-canvas menu example: Publicis ModemPublicis Modem Off-canvas menu example: RAW-FiRAW-Fi Off-canvas menu example: Off-canvas menu example: PRPLPRPL Off-canvas menu example: MediumMedium Off-canvas menu example: Media Evolution 2014Media Evolution 2014 Off-canvas menu example: Bienville Capital ManagementBienville Capital Management Off-canvas menu example: Damien WeighillDamien Weighill Off-canvas menu example: STRICHPUNKT DESIGNSTRICHPUNKT DESIGN Off-canvas menu example: jonathan da costajonathan da costa Off-canvas menu example: C.ROWEC.ROWE Off-canvas menu example: Off-canvas menu example: Design CouncilDesign Council Off-canvas menu example: Electrik CompanyElectrik Company

Further Reading

Related Content

  • Interesting UI Concept: Navicon Transformicons

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator