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.

Category: General (also: Front End, Design, UX)

Author: Atomic Glue Technical Team

## 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.

## Related entries

• [Breadcrumb Navigation](atomicglue.co/glossary/breadcrumb-navigation)
• [Accordion](atomicglue.co/glossary/accordion)

Last updated July 2025. Permalink: atomicglue.co/glossary/hamburger-menu