close

Hamburger icon

Synonyms: hamburger button, triple bar, menu button, burger icon, burger menu, top menu button, head menu button, collapsed menu icon

Is a control element placed in the top corner of the user interface that visually looks like 3 horizontal lines and from a bird's-eye view looks like a nice burger.
 

Menu animation by Aaron Iker

 

"The first big app that used a hamburger button was Path, I believe. Then it was popularised by Facebook, and the hamburger button started to appear from app to app and many apps started to use them.The biggest one is you can put a lot of information inside it, and at the same time provide a consistent way to find this extra information. Facebook is a great example of this." — Alex Tyagulsky, Readdle

Controversial

"What’s out of sight, is out of mind."

 

That little three-lined button is the devil. Whether you call it a side menu, navigation drawer, or a hamburger, hiding your features off-screen behind a nondescript icon in the corner is usually a poor mobile design choice. Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: the hamburger button is bad for engagement, and you should probably replace it with a tab bar or other navigation scheme.
 

  1. Not clear that this is menu
  2. Hides navigation
  3. Extra action
  4. Lower discoverability
  5. Less efficient
  6. Clash with Platform Navigation Patterns
  7. Not glanceable
  8. Makes pages less important
  9. Low engagement

share the term