Hamburger Menu
Also known as: nav drawer icon, sidebar menu icon, three-line menu
What Is a Hamburger Menu?
A hamburger menu is a navigation icon made up of three horizontal lines, typically placed in the top corner of a screen. Tapping or clicking it reveals a hidden navigation panel with links, sections, or settings that aren't visible by default.
The name comes from the icon's resemblance to a burger in a bun. It's one of the most widely recognized UI patterns across mobile and web.
How Does It Work?
The icon sits in a fixed position on the screen. When activated, it triggers a panel, usually sliding in from the side or dropping down, that contains the full navigation set. The panel closes when a user selects an item, taps outside it, or hits a close button, often shown as an X that replaces the three lines while the menu is open.
What Are the Benefits?
Screen space — navigation stays out of the way until it's needed, leaving more room for content on smaller screens.
Scalability — works well when a product has many navigation items that would clutter a visible nav bar.
Familiarity — users across platforms and age groups broadly recognize what the icon means.
What Are the Challenges?
Discoverability — hidden navigation is used less frequently and later in a session than visible navigation. Users who don't think to open the menu may miss features entirely.
Extra interaction cost — reaching any destination requires at least two taps, which adds friction to frequent navigation.
Not ideal for primary actions — if the most important sections of a product live inside a hamburger menu, engagement with those sections tends to drop.
When Does a Hamburger Menu Make Sense?
It works best for secondary or infrequent navigation (settings, account options, supplementary pages) rather than the core paths users take repeatedly. For products where users move between a small number of key sections, a tab bar or bottom navigation usually outperforms a hamburger menu on engagement and task completion.
Context is important too. On a desktop, hiding primary navigation behind an icon tends to hurt usability more than it helps. On mobile, where screen space is limited, the trade-off is more defensible, though it still warrants careful consideration of what gets hidden. These decisions sit at the heart of mobile web design and how navigation patterns are chosen for different screen contexts.
The hamburger menu is one of many UI elements that can serve navigation well or poorly, depending on how it's used and what it's being asked to do.