A popular navigation design pattern we’re now seeing more and more of is the off-canvas menu.

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-canvasThis 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: mynameischris.co.ukmynameischris.co.uk

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: SynthCu.beSynthCu.be

Off-canvas menu example: Design CouncilDesign Council

Off-canvas menu example: Electrik CompanyElectrik Company

Further Reading

Related Content

Author:

Jacob Gube is the co-founder and a managing editor of Design Instruct. He's a web developer, and also the owner of Six Revisions. Follow Jacob on Twitter: @sixrevisions