What is a hamburger menu in UX design?
A hamburger menu is a button represented by three horizontal lines stacked vertically, resembling a hamburger, that reveals a hidden navigation menu when clicked or tapped. The pattern became widespread in mobile web design as a way to hide navigation on small screens where space is limited. The icon was originally created by Norm Cox for the Xerox Star workstation in 1981 and was repopularized for mobile interfaces around 2009. Despite its widespread adoption, the hamburger menu has been the subject of significant usability research that consistently highlights its drawbacks.
What does research say about hamburger menus?
Multiple studies comparing visible navigation against hamburger menus show that visible navigation outperforms hidden navigation on discovery, engagement, and task completion. Users who can see navigation options are more likely to explore sections they would not have known to look for, are faster to find what they need, and report higher satisfaction. The hamburger icon itself is not universally understood: recognition of the three-line icon varies by user age, digital literacy, and prior exposure. When Nielsen Norman Group tested labeled alternatives like "Menu" with the icon, discoverability improved significantly.
When is a hamburger menu the right choice?
Hamburger menus are most defensible as a last resort when the number of navigation items exceeds what can be displayed in a tab bar or top navigation on the available screen size, and when a tab bar or other visible navigation pattern cannot accommodate the product's navigation structure. In these cases, a hamburger menu should be accompanied by a visible text label, should open a drawer or overlay that presents all navigation clearly, and should be positioned consistently in a location users expect, typically the top-left or top-right corner. The better question before reaching for a hamburger menu is whether the product's navigation structure is too complex and whether it can be simplified.