Hamburger Menu

A hamburger menu is a navigation control represented by three parallel horizontal lines, resembling a stylized sandwich bun. When tapped or clicked, it reveals a hidden menu that contains additional navigation options. First popularized in mobile interfaces, it became a common solution for handling limited screen space while maintaining access to multiple sections of an app or website.

For UX designers, the hamburger menu presents both benefits and trade-offs. On one hand, it declutters the interface by keeping secondary options hidden until needed. This allows primary content to take center stage, which is valuable on small screens. On the other hand, hiding navigation behind the menu can make important options harder to find, reducing discoverability and increasing cognitive effort. Designers often debate whether to use hamburger menus or expose navigation in other ways.

Accessibility adds another dimension to hamburger menu design. Screen readers must be able to describe the button accurately, often requiring clear labeling like “Menu” in addition to the visual icon. The target area must be large enough to tap comfortably on mobile devices, and transitions should be smooth enough not to disorient users. Without these considerations, the menu risks excluding users who rely on assistive technologies.

Real-world examples highlight both success and criticism of the hamburger menu. Facebook and Google initially relied heavily on the pattern, but later shifted toward bottom navigation bars or tab bars in mobile apps to increase discoverability. Still, many news apps, productivity tools, and enterprise dashboards use hamburger menus successfully to handle large sets of navigation items that would overwhelm users if fully exposed.

Hybrid approaches have also emerged. Some products combine a bottom navigation bar for top-level tasks with a hamburger menu for less-used options. This compromise balances visibility with space constraints, keeping critical actions within reach while reducing clutter.

Learn more about this in the Hamburger Menus Exercise, taken from the Common UI Components Lesson, a part of the Design Terminology Course.

Key Takeaways

• A hamburger menu is a three-line icon that reveals hidden navigation.
• Designers use it to save space but face trade-offs in discoverability.
• Accessibility requires clear labeling and adequate target size.
• Examples include apps like Facebook, Google, and enterprise tools.
• Hybrid navigation systems often combine hamburger menus with visible tabs.