Hamburger menu best practices, and when not to use one
Hide navigation behind a menu button only when there isn't room to show it. With four or fewer destinations, show them as links. When you do use a menu button, label it with the word "Menu", make it a real button that reports whether it's open, move through its links in a sensible order with the keyboard, and keep the main action visible outside it.
The trade-off
A menu button saves space and costs visibility. What people can't see, they use less: Nielsen Norman Group's research by Kara Pernice and Raluca Budiu, How to Make Navigation (Even a Hamburger) Discoverable on Mobile, reports that hidden navigation was used less often and more slowly than visible navigation, with a larger effect on desktop than on phones. They also found that the three-line icon isn't recognised by everyone, and that hidden menus worked best when they were prominent, labelled and clearly separate from the logo.
So the question isn't whether hamburgers are good or bad. It's whether the links you're hiding are ones people need to find. On a phone, a site with twelve sections has no realistic alternative. A site with Home, Menu, Book and Contact has several.
Hamburger menu alternatives for small sites
- Show the links
- Three or four short labels fit across a phone header at a readable size. This is the simplest answer for most small business sites.
- A second row
- Put the links on their own row under the logo. If they don't all fit, let the row scroll sideways, with the last visible item cut off so it's obvious there's more.
- Priority plus
- Show as many links as fit and move the rest under a "More" button. It keeps the important destinations visible.
- Links in the content
- On a one-page site, the sections are the navigation. A short list of jump links after the hero can do the job of a menu.
- Bottom navigation
- For app-like sites with a few equal destinations, a tab bar at the bottom of the screen; see bottom navigation on the mobile web.
Mobile menu design when you do need one
- Label it. "Menu" next to the icon, or instead of it. The icon alone is ambiguous to some visitors.
- Use a real
button. Not adivwith a click handler. It needsaria-expanded="false"when closed and"true"when open, andaria-controlspointing to the list. - Keep the main action outside. "Book" or "Buy" should stay visible in the header, not live inside the menu.
- Don't use
role="menu". The W3C's disclosure navigation example uses plain buttons and lists of links, because site navigation doesn't need the complex keyboard model that menu roles promise. - Escape closes it and returns focus to the button. Tabbing past the last link should close it too, or keep focus moving in a predictable order.
- Mark the current page with
aria-current="page"and a visible style. - Make the open menu easy to close with a large target, and don't trap the page behind an overlay without a way out.
A hamburger menu on desktop
On a laptop screen there is almost always room to show the navigation, and hiding it costs the most there. Reserve a desktop menu button for sites with a genuinely large secondary navigation, and even then show the main sections as links. A portfolio with three pages behind a hamburger on a 1440px screen is a style choice that visitors pay for. If the site really has dozens of destinations, look at mega menu design instead.
Menus without JavaScript
A basic disclosure can be built in HTML alone: details and summary give you a toggle that opens and closes with a click or the keyboard and is announced as expanded or collapsed. It won't close on Escape or when focus leaves it, and it can't stop the page scrolling behind an overlay, so keep it simple: an inline list that pushes the content down rather than a full-screen panel. The older checkbox trick, a hidden checkbox styled as a button, is worse for screen readers and best avoided.
Menus in Anticode
Design-engine pages ship with no scripts at all, so any menu on them has to work with HTML and CSS alone, and Anticode doesn't build a hamburger button. Instead, the header shows the site's name, its main links and one action button. On a one-page site, the section links are hidden below 600px wide and the header keeps the name and the action button. On a multi-page site, below 760px the page links move to their own row under the name, which scrolls sideways if they don't all fit, and the current page is marked.
App builds, which the model writes as a whole program with JavaScript, can include a scripted menu if you ask for one. Check it with a keyboard and a screen reader, since nothing checks its behaviour automatically.
Questions people ask
Should I use a hamburger menu on desktop?
Rarely. There's usually room to show the main links, and hidden navigation gets used less.
Does the hamburger icon need a label?
It helps. The word "Menu" beside the icon removes any doubt, and the button needs an accessible name either way.
How many links can I show before I need a menu button?
On a phone, three or four short labels usually fit. Beyond that, try a scrolling row or a "More" button before hiding everything.