View source for Hamburger button

{{short description|User interface element}}
[[File:Hamburger icon.svg|thumb|upright|Collapsed menu ("hamburger") icon]]

The '''hamburger button''' is a [[Button (computing)|button]], typically placed in a top corner of a [[Graphical user interface|graphical user interface]].<ref name="W3s-howto"/>  Its function is to toggle a [[Menu (computing)|menu]] (sometimes referred to as a '''hamburger menu''') or [[Navigation bar|navigation bar]] between being collapsed behind the button or displayed on the screen.

The [[Icon (computing)|icon]] which is associated with this button consists of three parallel horizontal bars ([[File:Hamburger_icon.svg|class=notpageimage skin-invert|20px]]), known as the '''hamburger icon''' (sometimes called '''collapsed menu icon'''). It is intended to resemble the lines of text in a small printed [[Finance:Menu|menu]].<ref name="Gizmodo"/><ref name="WSJ_20130318"/> It is named after its unintentional resemblance to a hamburger.

==History==

{{multiple image
| width             = 60
| image1            = Xerox Star 8010 ViewPoint.jpg
| alt1              = Xerox Star computer interface
| image2            = Microsoft Windows 1.0 screenshot.png
| alt2              = Microsoft Windows 1.0 screenshot
| total_width       = 320
| footer            = Early versions of the hamburger button can be seen in the 1980s graphical user interfaces of the [[Engineering:Xerox Star|Xerox Star]] computer and Microsoft [[Software:Windows 1.0|Windows 1.0]]
}}

The icon was originally designed by Norm Cox as part of the user interface for the [[Engineering:Xerox Star|Xerox Star]] personal computer, introduced in 1981.<ref name="Evernote-origin"/> Cox described the icon's creation, saying:<ref>{{Cite web|url=https://blog.placeit.net/history-of-the-hamburger-icon/|title=A Brief History of the Hamburger Icon|date=2014-10-29|website=Placeit Blog|language=en-US|access-date=2019-02-23}}</ref>
<blockquote>Its graphic design was meant to be very 'road sign' simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13...).</blockquote>

In possibly its first use after the Xerox Star, the release of [[Software:Windows 1.0|Windows 1.0]] in 1985 contained a hamburger icon in each window's control menu.<ref>{{cite web |url=https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/ |title=Microsoft First Used The Controversial Hamburger Menu In 1985 |last=Ali |first=Fahad |date=2015-05-13 |website=windowschimp.com |access-date=2019-06-12 | archiveurl  = https://web.archive.org/web/20210401222227/https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/
| archivedate = 2021-04-01}}</ref> It was short-lived, however, as the hamburger icon disappeared in [[Software:Windows 2.0|Windows 2.0]] in favor of a single horizontal line denoting the control menu. [[Software:Windows 95|Windows 95]] replaced the single line with the program's icon,<ref>{{cite web |url=http://doublehammer.com/help/refwine1.htm#ControlMenu |title=Windows Elements |last=Doppelhammer |first=Jim |website=doublehammer.com |access-date=2019-06-12}}</ref> and the hamburger would not return to Windows until a placement on the [[Software:Start menu|start menu]] of the [[Software:Windows 10 version history#Version 1607 (Anniversary Update)|one-year update]] of [[Software:Windows 10|Windows 10]].<ref>{{cite web |url=https://wccftech.com/the-new-hamburger-start-menu-for-windows-10/ |title=Here's How the New Windows 10 Anniversary Start Menu Looks Like |last=Shaikh |first=Rafia |date=2016-04-04 |website=wccftech.com |access-date=2019-06-12}}</ref>

Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available to [[Mobile app|mobile app]]s.<ref name="Gizmodo" /><ref name="PlaceItHist"/><ref name="Stuff"/>

==Variants{{anchor|Appearance and functionality}}==
[[File:Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu.png|thumb|upright|A hamburger menu (left) opened by clicking the hamburger icon in a [[List of Wikipedia mobile applications#Wikimedia Foundation|Wikipedia mobile app]]]]

The hamburger [[Icon (computing)|icon]] consists of three parallel horizontal lines, intended to resemble the lines of text in a small menu.<ref name="Gizmodo"/><ref name="WSJ_20130318"/> To further reduce screen real-estate consumption it may be narrowed to three vertically stacked dots ([[File:Kebab-menu-ui-icon-1.svg|class=notpageimage skin-invert|20px]]). This has been called a '''kebab''', '''meatball''' or '''falafel button''', but still pops up a normal-looking menu.  In the [[Company:Microsoft|Microsoft]] Office 365 and Google online applications, a similar icon consisting of three rows of three squares ( [[File:Grid icon.svg|class=notpageimage skin-invert|20px]] ) pops up an array of icons instead of a menu, and is referred to as a '''waffle button'''.<ref name="TechR-365"/>

Clicking or pressing these buttons results in a vertical [[Menu (computing)|menu]] being revealed, generally the same as a one-item [[Menu bar|menu or tab bar]].<ref name="TechCrunch - 24 May 2014 - Kill The Hamburger Button"/>

==Similar characters==

The hamburger button is not a textual character, and is not encoded in [[Unicode]]. However, sometimes the following visually-similar textual characters are used by designers to create a hamburger button:<ref>[https://justmarkup.com/articles/2019-12-04-hamburger-menu/ Do's and Don'ts of implementing a hamburger menu]</ref>

===Hamburger button===
* {{unichar|2261|nlink=triple bar}}
* {{unichar|11054|nlink=brahmi numerals}}
* {{unichar|2630|nlink=}}

===Kebab button===
* {{unichar|1392}}
* {{unichar|205D}}
* {{unichar|22EE}}
* {{unichar|2D57}}
* {{unichar|FE19}}

===Waffle button===
* three of the kebab button characters in a row, such as ⁝⁝⁝
* {{unichar|25A6|}}
* {{unichar|130D1|}}

==Reception==

It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered;<ref name="bbc-H-mystery"/> in particular, older users less familiar with modern iconography may find it confusing.<ref name="Loving & Hating the Hamburger Icon">{{Cite web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|title=Loving & Hating the Hamburger Icon|date=2018-09-17|website=Webdesigner Depot|language=en|access-date=2019-02-23}}</ref> The location of the hamburger menu icon also depends on the specific website or app.<ref name="Hamburger menu icon: should it be on the left or right?">{{Cite web|url=https://uxpickle.com/hamburger-menu-icon-should-it-be-on-the-left-or-right/|title=Hamburger menu icon: should it be on the left or right?|date=2018-09-17|website=UX Pickle|language=en|access-date=2022-11-02}}</ref>

The menu button may increase [[Interaction cost|interaction cost]] compared to a [[Menu bar|menu bar]], requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen.<ref name="Tsiodoulos"/> It has also been argued that designers tend to overload these icons with too much hidden information.<ref name="Loving & Hating the Hamburger Icon"/>

== See also ==
* Menu key
* {{section link|Triple bar|Application design}}
* {{section link|Ellipsis|In computer user interface}}&nbsp;– used to indicate "more options" (options that are hidden, whereas the collapsed menu icon signifies all hidden options)

== References ==
{{reflist|2|refs=

<ref name="W3s-howto">{{cite web|url=https://www.w3schools.com/howto/howto_css_menu_icon.asp|title=How To Create a Menu Icon|website=w3schools.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180905231557/https://www.w3schools.com/howto/howto_css_menu_icon.asp|archive-date=2018-09-05|url-status=live}}</ref>

<ref name="Gizmodo">{{cite web |first=Kelsey |last=Campbell-Dollaghan |url=https://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 |title=Who Designed the Hamburger Icon? |publisher=Gizmodo |date=March 31, 2014 |access-date=February 2, 2016 |archive-url=https://web.archive.org/web/20160206205739/http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 |archive-date=2016-02-06 |url-status=live }}</ref>

<ref name="PlaceItHist">{{cite web |url=https://blog.placeit.net/history-of-the-hamburger-icon/ |title=A Brief History of the Hamburger Icon |author=<!--Staff writer(s); no by-line.--> |date=29 October 2014 |website=placeit.net |access-date=25 January 2017 |archive-url=https://web.archive.org/web/20170202023133/https://blog.placeit.net/history-of-the-hamburger-icon/ |archive-date=2017-02-02 |url-status=live }}</ref>

<ref name="Evernote-origin">{{cite web|url=https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83|title=The origin of the hamburger icon|website=evernote.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20151107060809/https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83|archive-date=2015-11-07|url-status=live}}</ref>

<ref name="Stuff">{{cite web|url=https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design|title=We need a standard show navigation icon for responsive web design|website=Stuff & Nonsense|date=17 March 2012 |access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161124/https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design|archive-date=2018-09-20|url-status=live}}</ref>

<ref name="WSJ_20130318">{{cite news  | url= https://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/  | title= What's a 'hamburger' button? A guide to app features  | last= Lessin  | first= Jessica  | date= March 18, 2013  | work= The Wall Street Journal  | publisher= Dow Jones & Company  | access-date= April 10, 2015  | archive-url= https://web.archive.org/web/20150416195303/http://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/  | archive-date= 2015-04-16  | url-status= live  }}</ref>

<!-- <ref name="CSS-how">{{cite web|url=https://css-tricks.com/three-line-menu-navicon/|title=Three Line Menu Navicon - CSS-Tricks|date=10 October 2012|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161437/https://css-tricks.com/three-line-menu-navicon/|archive-date=2018-09-20|url-status=live}}</ref> -->

<ref name="TechR-365">{{cite web |url=https://www.techradar.com/news/software/business-software/office-365-store-saves-time-with-single-sign-on-to-web-apps-1297871 |title=Office 365 Store saves time with single sign-on to web apps |last=Nguyen |first=Chuong |date=June 26, 2015 |website=Tech Radar Pro |access-date=2018-02-08 |archive-url=https://web.archive.org/web/20180209063726/http://www.techradar.com/news/software/business-software/office-365-store-saves-time-with-single-sign-on-to-web-apps-1297871 |archive-date=2018-02-09 |url-status=live }}</ref>

<ref name="Tsiodoulos">{{cite thesis |last=Tsiodoulos |first=Dimitrios |date=2016 |title=Comparison of hamburger and bottom bar menu on mobile devices for three level navigation |url=http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf |access-date=2018-06-13 |archive-url=https://web.archive.org/web/20180613235022/http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf |archive-date=2018-06-13 |url-status=live }}</ref>

<!-- <ref name="Kadlec">{{cite web|url=https://timkadlec.com/2012/08/mobile-navigation-icons/|title=Mobile Navigation Icons|first=Tim|last=Kadlec|website=TimKadlec.com|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161131/https://timkadlec.com/2012/08/mobile-navigation-icons/|archive-date=2018-09-20|url-status=live}}</ref>
 -->
<ref name="TechCrunch - 24 May 2014 - Kill The Hamburger Button">{{cite web | url= https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ | title= Kill the hamburger buttons | last= Constine | first= Josh | date= May 24, 2014 | work= TechCrunch | access-date= April 10, 2015 | archive-url= https://web.archive.org/web/20160819092410/https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ | archive-date= 2016-08-19 | url-status= live }}</ref>

<!-- <ref name="Twisted">{{cite web|url=http://www.alwaystwisted.com/post.php?s=2012-05-12-create-a-pure-css-menu-button|title=Create a pure CSS menu button|first=Stuart|last=Robson|access-date=2018-09-20|archive-url=https://web.archive.org/web/20180920161018/http://www.alwaystwisted.com/post.php?s=2012-05-12-create-a-pure-css-menu-button|archive-date=2018-09-20|url-status=live}}</ref> -->

<ref name="bbc-H-mystery">{{cite news|title=Hamburger icon: How these three lines mystify most people|url=https://www.bbc.co.uk/news/magazine-31602745|access-date=11 October 2018|date=16 May 2015|website=BBC|first=Chris|last=Stokel-Walker|archive-url=https://web.archive.org/web/20180220073719/http://www.bbc.co.uk/news/magazine-31602745|archive-date=2018-02-20|url-status=live}}</ref>

}}
{{GUI widgets}}

[[Category:Graphical control elements]]

{{Sourceattribution|Hamburger button}}