Hamburger menu

An icon of three horizontal lines that hides the main menu off-screen until you tap it.

Also called: hamburger, hamburger menu, burger, burger menu, three lines, 3 lines, three bars, three stripes, three horizontal lines, lines icon, menu, mobile menu

What it is for

A space-saving pattern that matters most on mobile. Tapping it reveals the navigation: a slide-out panel, an accordion or a full-screen overlay. A complex site structure then fits into a minimal design.

Where you see it

• Responsive websites — hides the main navigation on narrow screens
• Mobile apps — opens the global menu, often as a side panel
• Online stores — a full-screen catalog in the mobile version

What it is called in code

• <button aria-expanded> + <nav>
• drawer / off-canvas menu

See also

• Bottom navigation — A navigation bar fixed to the bottom of a phone screen, with 3–5 icons for the main sections.
• Three-dot menu — An icon, usually three dots in a row or a column, that opens a hidden list of secondary actions.
• Tabs — A row of labels above a block of content. Click one and the block shows that section.