Hamburger Menu
The three-line icon that hides a site's or app's navigation behind a tap, a fix for small screens that saves space at the price of making whatever it hides less likely to be found.
The hamburger menu is the icon of three stacked horizontal lines that opens a hidden panel of navigation when tapped. It became the standard answer to a small-screen problem, and the standard example of hiding things that people then fail to find.
The icon is older than phones. Norm Cox drew it for the Xerox Star workstation in 1981 as a list symbol: three lines standing for menu items. It stayed obscure for three decades until mobile apps and responsive websites needed somewhere to put navigation that didn't fit across a narrow screen. Around 2012 it spread everywhere, usually opening a navigation drawer that slides in from the side.
The case for it is space, which is scarce on a phone. A phone screen can't hold a desktop site's row of links, and the hamburger hides all of them behind one small target, leaving the screen to content.
The case against it is that hidden things get used less. Research by usability firms and by app makers found that navigation hidden behind the icon was used much less than navigation left visible, and that people found fewer features. When an app moved its main sections from a drawer to a visible tab bar, engagement with those sections often rose. The icon has two problems:
- No scent. Three lines say "menu" but not what is in it, so people can't tell whether what they want is behind it.
- Out of sight. Options that can't be seen don't come to mind, so people rely on what's in front of them.
The icon's meaning also had to be learned. Early tests found many people didn't recognize it, which is why some sites added the word "Menu" beside it, a common and effective fix; see Iconography. It has since become familiar enough to count as a convention.
Common alternatives and compromises:
- Tab bars. Three to five top destinations as labeled icons along the bottom, within reach of the thumb; see Touch Target Size.
- Priority+ navigation. Show as many links as fit and move the rest into a "More" menu as the screen narrows.
- Hybrid. Keep the most important actions visible and put secondary ones in the drawer, an application of Progressive Disclosure.
Its cousins share its weakness. The vertical three-dot "kebab" and horizontal "meatball" icons open overflow menus of secondary actions, and are fine for rare actions but bad for frequent ones; see Discoverability. The rule that emerged is that hiding is a cost to justify, not a free way to tidy a screen.
See also6
Breadcrumb
The short row of links near the top of a page that shows where it sits in a site's hierarchy, such as Home › Shoes › Running, letting people orient themselves and step back up a level in one click.
Design & Interface10 connections
Information Architecture
How information is organized, labeled, and navigated so people can find what they need.
Data & Content17 connections
Accordion
A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.
Design & Interface12 connections
Tabs
A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.
Design & Interface12 connections
Bottom Sheet
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
Design & Interface13 connections
Dropdown Menu
A control that hides a list of options until it's opened, saving space at the cost of hiding choices, which ranges from desktop menu bars to the web's notoriously hard-to-style select element and the sprawling mega menus of retail sites.
Design & Interface17 connections
Linked from7
- AccordionDesign & Interface
A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.
- Bottom SheetDesign & Interface
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
- BreadcrumbDesign & Interface
The short row of links near the top of a page that shows where it sits in a site's hierarchy, such as Home › Shoes › Running, letting people orient themselves and step back up a level in one click.
- Dropdown MenuDesign & Interface
A control that hides a list of options until it's opened, saving space at the cost of hiding choices, which ranges from desktop menu bars to the web's notoriously hard-to-style select element and the sprawling mega menus of retail sites.
- Information ArchitectureData & Content
How information is organized, labeled, and navigated so people can find what they need.
- Progressive DisclosureDesign & Interface
Show only what most users need now, and defer the rest behind an explicit action, instead of exposing everything at once.
- TabsDesign & Interface
A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.