ui patterns
Navigation drawer (hamburger)
What is a navigation drawer, and what does the hamburger menu cost?
A navigation drawer hides a menu off-screen behind an icon - usually the three-line 'hamburger' - and slides it in when tapped. It recovers screen space by keeping navigation out of sight, which works well on small screens but loses out on wider ones where showing links directly would be better.
Also known as: hamburger menu, nav drawer, off-canvas menu, side menu
Prefer to watch?
Watch the recap 0:31
The demo
The same five destinations, two ways. Flip between hiding them behind a hamburger and showing them in a bar - and notice what happens to the links you'd actually use.
What this demo shows (text version)
A small app header is shown two ways. As a hamburger, the five navigation links - Home, Browse, Deals, Account, Help - are hidden behind a three-line icon; tapping it slides in a drawer to reveal them. Until then, none of the destinations are visible, and reaching any of them takes an extra tap.
As a visible bar, the same links sit in a row, always on view, with the main one a single tap away. The work is identical; only their visibility changed. Hiding navigation reclaims space - a fair trade on a cramped phone - but it costs discoverability and flattens the hierarchy, so on a screen with room to spare, showing the key links usually beats hiding them all.
A hamburger drawer trades visibility for space: tuck the menu away and the screen feels cleaner, but hidden links get used less and the most-used destinations need an extra tap. It’s a reasonable trade on a phone where space is tight; on a wide screen with room to spare, showing key links directly is better.
Behind the hamburger, the links existed but did nothing until you went looking - out of sight, out of mind. Shown in a bar, the same links advertised themselves and the main one was a single tap away. The drawer didn't remove the navigation; it removed people's awareness of it.
Hiding navigation has a measurable cost: what people can't see, they explore less, and burying every destination behind one icon flattens them all to "menu", erasing the hierarchy that tells someone what matters. The space you reclaim is paid for in discoverability and an extra tap on the things people do most.
That cost is worth paying when space genuinely runs out - on a phone, a drawer is often the honest choice for a long or secondary menu. The mistake is carrying the pattern onto wide screens out of habit, hiding a handful of links behind a hamburger when the room to show them was right there.
The strong compromise is to show the few destinations that matter and tuck the rest away: a visible bar of primary links with an overflow or "more" for the long tail. And whatever you hide, make the trigger a clear target, label it where you can, and keep the drawer fully keyboard- and screen-reader operable.
A hamburger drawer hides your menu behind an icon to free up screen real estate, which works well on phones but can make key links harder to find. Try the interactive demo on this page to see how it behaves in different screen sizes - that’s how you test its trade-offs in real time.