What is a Hamburger Menu? | Glossary

A hamburger menu is the icon of three stacked horizontal lines that, when tapped, opens a site's menu. It gets its name because the lines look a little like a bun, patty and bun. Websites use it mainly on phones, where there is no room to show every menu link across the top of the screen.

Where the icon came from

The three-line symbol was designed by Norm Cox for the Xerox Star workstation in the early 1980s. It became widespread around the early 2010s as mobile apps and responsive websites needed a compact way to tuck a menu away. Today most people recognise it, though adding the word "Menu" beside or under the icon still helps less confident users.

How it works on a website

At smaller screen widths, the full navigation bar is hidden and the icon appears in its place. Tapping it opens the menu as a dropdown, a panel sliding in from the side, or a full-screen overlay. A well-built version is a real <button>, not a clickable image, with:

• an accessible name such as "Open menu", so screen readers announce it;
• aria-expanded switching between true and false, part of ARIA, so assistive technology knows whether the menu is open;
• a close control, and support for the Escape key;
• focus moving into the menu when it opens and returning to the button when it closes.

Example: a café with online ordering

A café's mobile header shows the logo, a hamburger icon and an "Order" button. Behind the icon are Menu, Catering, Locations, About and Contact. The one link that drives revenue, ordering, is kept outside the hamburger so it is never hidden. That pattern, collapsing secondary links but leaving the main action visible, is how most well-run small-business sites use it.

When to use one, and when not

For phones, a hamburger is a reasonable default if you have more than three or four menu items. Hidden navigation does get used less than visible navigation, so anything critical should stay outside it. On desktop there is usually room to show the menu, and hiding it behind an icon there mostly makes your pages harder to explore. If you have only three pages, just show three links.

Hamburger menu mistakes

• Putting the main action inside it. "Book" or "Call" should stay visible.
• Using it on desktop by default. It hides navigation that would fit comfortably.
• A tiny tap target. Make the button at least around 44 by 44 pixels so it is easy to hit.
• No way to close it. A full-screen menu without an obvious close button traps people.
• Page scrolling behind the open menu. Lock background scroll while it is open to avoid confusion.

Related terms

• Navigation bar: the menu the icon reveals.
• Responsive design: why the menu collapses on small screens.
• ARIA: attributes that make the toggle accessible.
• Header: where the icon usually sits.