Open main menu

Menu icon

  (Redirected from Hamburger button)
Example menu icon

The Collapsed Menu Icon,Burger Button or Hamburger Button is a button placed typically in a top corner of a graphical user interface.[1]

It takes the form of an icon that consists of three parallel horizontal lines (displayed as ), suggestive of a list,[2]. The names refer to its resemblance to the menu that is typical exposed or opened when interacting with it.[3]

Selecting (tapping or clicking) this button results in a menu being revealed (sliding out or popping up), which distinguishes it from a menu bar, which is always on display.

The icon was originally designed by Norm Cox as part of the user interface for the Xerox Star, introduced in 1981;[2] it saw a resurgence starting in 2009 stemming from the limited screen area available to mobile apps.[4]


The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ),[5]. In the Microsoft Office 365 platform, a similar application menu consisting of three rows of three squares is displayed. [6]

In the context of mobile apps, compared to a bottom bar menu, a menu button increases interaction cost and pays out in less space usage of the screen.[7]

Menu buttons have been criticized by TechCrunch as a "poor design choice" in apps for mobile devices.[8]

[9][10][11][12][13][14][15]

See alsoEdit

ReferencesEdit

  1. ^ "How To Create a Menu Icon". www.w3schools.com. 
  2. ^ a b Campbell-Dollaghan, Kelsey (March 31, 2014). "Who Designed the Hamburger Icon?". Gizmodo. Retrieved February 2, 2016. 
  3. ^ Lessin, Jessica (March 18, 2013). "What's a 'hamburger' button? A guide to app features". The Wall Street Journal. Dow Jones & Company. Retrieved April 10, 2015. 
  4. ^ "A Brief History of the Hamburger Icon". placeit.net. 29 October 2014. Retrieved 25 January 2017. 
  5. ^ "Why did Google choose to use vertical three dots icon instead of Hamburger icon on Chrome? - Quora". www.quora.com. Retrieved 2017-01-10. 
  6. ^ Nguyen, Chuong (June 26, 2015). "Office 365 Store saves time with single sign-on to web apps". Tech Radar Pro. Retrieved 2018-02-08. 
  7. ^ Tsiodoulos, Dimitrios (2016). Comparison of hamburger and bottom bar menu on mobile devices for three level navigation (PDF) (Thesis). Retrieved 2018-06-13. 
  8. ^ Constine, Josh (May 24, 2014). "Kill the hamburger buttons". TechCrunch. Retrieved April 10, 2015. 
  9. ^ "The origin of the hamburger icon". 
  10. ^ "A Brief History of the Hamburger Icon - Placeit Blog". 29 October 2014. 
  11. ^ "Three Line Menu Navicon - CSS-Tricks". 10 October 2012. 
  12. ^ Keith, Jeremy. "Navicon". 
  13. ^ Ltd., Stuff & Nonsense. "We need a standard show navigation icon for responsive web design". 
  14. ^ Robson, Stuart. "Create a pure CSS menu button". 
  15. ^ Kadlec, Tim. "Mobile Navigation Icons - TimKadlec.com". timkadlec.com.