Hamburger Menu
Definition
A button with three horizontal lines that expands to reveal a hidden navigation menu, common on mobile sites.
What is a Hamburger Menu?
A hamburger menu is a navigation pattern where the main menu is hidden behind a button with three stacked horizontal lines (resembling a hamburger). Tapping or clicking the icon reveals the full navigation.
It's become the standard way to handle navigation on mobile devices where screen space is limited.
Why It's Called a Hamburger
The three horizontal lines vaguely resemble a hamburger: top bun, patty, bottom bun. The icon was actually invented in 1981 but became ubiquitous with the rise of mobile-first design.
Pros and Cons
Advantages
- Saves precious screen space on mobile
- Keeps the interface clean and focused
- Users recognise and understand the pattern
- Works well when you have many menu items
Disadvantages
- Hides navigation behind an extra tap
- Some users don't recognise the icon
- Important navigation is less discoverable
- Can hurt engagement compared to visible menus
When to Use Hamburger Menus
| Device | Recommendation |
|---|---|
| Mobile | Usually appropriate, especially with many menu items |
| Tablet | Consider, but test visible alternatives |
| Desktop | Rarely needed—show the full menu instead |
Best Practices
- Add a "Menu" label next to the icon for clarity
- Animate the opening for clear feedback
- Keep menu options minimal even inside the hamburger
- Consider a hybrid approach: show key items, hamburger for the rest
- Test whether a visible bottom navigation works better on mobile
The hamburger menu isn't perfect, but it's a widely understood convention. The key is using it thoughtfully, not defaulting to it without consideration.