Hamburger Menu
A hamburger menu is a navigation icon consisting of three horizontal lines that, when clicked or tapped, reveals a hidden menu. It is widely used on mobile websites and apps to save screen space.
Definition
A hamburger menu (also called the hamburger icon) is a user interface element that uses three stacked horizontal lines to represent a navigation menu. When activated (by click, tap, or hover), it expands to reveal the site's navigation links. The icon was created by Norm Cox in 1981 for the Xerox Star personal workstation and was popularized in mobile design by the rise of responsive web. It is called a "hamburger" because the three lines resemble the patty between bun layers, though the resemblance is loose. While space-efficient, the hamburger menu is also controversial in UX circles for hiding critical navigation items behind an extra click.
Where Hamburger Menus Are Used
Hamburger menus are most commonly found in: * Mobile websites: Where screen real estate is limited. The icon frees up space for content. * Web applications: Dashboards and SaaS products often use a hamburger icon for the sidebar navigation, freeing the main viewport for data. * Desktop responsive sites: As the viewport shrinks, traditional horizontal nav bars collapse into a hamburger icon. * Mobile apps: Nearly every app with a navigation drawer uses the hamburger icon as the standard affordance.
The UX Debate
The hamburger menu is one of the most debated UI patterns. Critics argue that hiding navigation decreases discoverability and engagement. A/B tests by some large companies found that replacing the hamburger with a visible tab bar increased engagement. Proponents argue that for content-first experiences (blogs, news, articles), hiding the nav improves readability and reduces distraction. The right answer depends on context. For tools and task-oriented apps where navigation is critical, a persistent visible nav often outperforms. For content consumption, the hamburger saves space responsibly.
Implementation Best Practices
Use a clear, recognizable icon (three horizontal lines) with an accessible label for screen readers. Animate the transition smoothly between open and closed states. Ensure the menu covers or pushes aside content appropriately. Provide a close button or swipe-to-close gesture. Consider hybrid approaches: show critical nav items persistently and relegate secondary items behind the hamburger. Always test with real users to validate your navigation pattern.
Common questions
- Q. Should I use a hamburger menu on desktop?
- A. Generally no. Desktop has enough screen space for a visible navigation bar. The hamburger adds an unnecessary click.
- Q. What alternatives exist?
- A. Tab bars (bottom navigation), priority+ patterns (showing as many items as fit, hiding the rest behind "more"), and horizontal scroll all offer alternatives.
- Q. Do users understand the hamburger icon?
- A. Most users do, especially on mobile. However, usability tests show that some users, particularly older demographics, may miss it.
Key takeaways
- A hamburger menu is a space-saving icon that reveals navigation on click or tap.
- It is most appropriate on mobile and content-first websites.
- The pattern has UX trade-offs: saves space but reduces navigation visibility.
- Always pair the icon with an aria-label for accessibility.
At a glance
- Icon Design
- Three horizontal stacked lines
- Creator
- Norm Cox, 1981 (Xerox Star)
- Best Use Case
- Mobile sites and apps with limited screen space
- Accessibility
- Requires aria-label and keyboard support
How Atomic Glue helps
Our design team evaluates navigation patterns for every project. Sometimes a hamburger is right; sometimes it is not. We make the call based on data, not trends. Explore Web Development or get in touch.
Get in touchUnderlined terms have their own entry. Selecting one shows it on the map below.
Atomic Glue. "Hamburger Menu." Glossary.atomicglue.co/glossary/hamburger-menu
How Hamburger Menu connects
A hamburger menu is a navigation icon consisting of three horizontal lines that, when clicked or tapped, reveals a hidden menu. It is widely used on mobile websites and apps to save screen space.
Definition
A hamburger menu (also called the hamburger icon) is a user interface element that uses three stacked horizontal lines to represent a navigation menu. When activated (by click, tap, or hover), it expands to reveal the site's navigation links. The icon was created by Norm Cox in 1981 for the Xerox Star personal workstation and was popularized in mobile design by the rise of responsive web. It is called a "hamburger" because the three lines resemble the patty between bun layers, though the resemblance is loose. While space-efficient, the hamburger menu is also controversial in UX circles for hiding critical navigation items behind an extra click.
Where Hamburger Menus Are Used
Hamburger menus are most commonly found in:
- Mobile websites: Where screen real estate is limited. The icon frees up space for content.
- Web applications: Dashboards and SaaS products often use a hamburger icon for the sidebar navigation, freeing the main viewport for data.
- Desktop responsive sites: As the viewport shrinks, traditional horizontal nav bars collapse into a hamburger icon.
- Mobile apps: Nearly every app with a navigation drawer uses the hamburger icon as the standard affordance.
The UX Debate
The hamburger menu is one of the most debated UI patterns. Critics argue that hiding navigation decreases discoverability and engagement. A/B tests by some large companies found that replacing the hamburger with a visible tab bar increased engagement. Proponents argue that for content-first experiences (blogs, news, articles), hiding the nav improves readability and reduces distraction. The right answer depends on context. For tools and task-oriented apps where navigation is critical, a persistent visible nav often outperforms. For content consumption, the hamburger saves space responsibly.
Implementation Best Practices
Use a clear, recognizable icon (three horizontal lines) with an accessible label for screen readers. Animate the transition smoothly between open and closed states. Ensure the menu covers or pushes aside content appropriately. Provide a close button or swipe-to-close gesture. Consider hybrid approaches: show critical nav items persistently and relegate secondary items behind the hamburger. Always test with real users to validate your navigation pattern.
Common questions
Q: Should I use a hamburger menu on desktop?
A: Generally no. Desktop has enough screen space for a visible navigation bar. The hamburger adds an unnecessary click.
Q: What alternatives exist?
A: Tab bars (bottom navigation), priority+ patterns (showing as many items as fit, hiding the rest behind "more"), and horizontal scroll all offer alternatives.
Q: Do users understand the hamburger icon?
A: Most users do, especially on mobile. However, usability tests show that some users, particularly older demographics, may miss it.
Key takeaways:
A hamburger menu is a space-saving icon that reveals navigation on click or tap.
It is most appropriate on mobile and content-first websites.
The pattern has UX trade-offs: saves space but reduces navigation visibility.
Always pair the icon with an aria-label for accessibility.