Go home
Services
Customers
About Us
Contact Us
Glossary
FAQ
Blog
Manage Billing
View pricing Get Free Hero Redesign
The Web Design Glossary

Hamburger Menu

[ham-bur-ger men-yoo]

A hamburger menu is a button commonly found in websites and applications that consists of three horizontal lines stacked on top of each other, resembling a hamburger. When clicked or tapped, it reveals a hidden navigation menu containing links and other menu items.

Origin and Evolution

The hamburger menu icon was originally designed by Norm Cox for the Xerox Star personal workstation in 1981. It has since become one of the most recognized and widely used interface elements in digital design. Its popularity surged with the rise of mobile devices and responsive web design, as it offered an elegant solution for condensing navigation menus on smaller screens.

Design Benefits and Considerations

Advantages

  • Saves valuable screen space by hiding navigation items
  • Creates a cleaner, more minimalist interface
  • Universally recognized across different platforms and cultures
  • Ideal for responsive design and mobile-first approaches

Potential Drawbacks

  • Can reduce discoverability of navigation items
  • May increase the number of clicks needed to access content
  • Some users, particularly older ones, might not recognize its function
  • Can impact user engagement if critical navigation items are hidden

Implementation Best Practices

Design Guidelines

  • Maintain consistent positioning (typically top-right corner)
  • Ensure adequate touch target size (minimum 44x44 pixels)
  • Provide visual feedback when interacted with
  • Consider adding a “Menu” label for clarity

Technical Considerations

  • Implement smooth animations for menu transitions
  • Ensure keyboard accessibility
  • Include proper ARIA labels for screen readers
  • Test functionality across different devices and browsers

Modern Alternatives

While the hamburger menu remains popular, designers are exploring alternative navigation patterns:

  • Bottom navigation bars
  • Tab bars
  • Progressive disclosure
  • Priority+ navigation
  • Combination approaches using both visible and hidden navigation elements

The choice of navigation pattern should always be based on the specific needs of your users and the goals of your website or application. While the hamburger menu is a valuable tool in the designer’s toolkit, it’s essential to consider whether it’s the most appropriate solution for your specific use case.