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 buys back screen space by putting navigation out of sight, which is its strength on a small screen and its weakness everywhere there was room to show the links instead.
Also known as: hamburger menu, nav drawer, off-canvas menu, side menu
Prefer to watch?
Watch the recap 0:41
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 is cleaner, but hidden links get explored less and the most-used destinations cost an extra tap. It's a fair deal on a phone where space is scarce; on a wide screen with room to spare, showing the key links beats hiding all of them behind one icon.
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.