Hamburger button

{{short description|User interface element}} thumb|upright|Collapsed menu ("hamburger") icon

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

The icon which is associated with this button consists of three parallel horizontal bars (≡), known as the '''hamburger icon''' (sometimes called '''collapsed menu icon'''). It is intended to resemble the lines of text in a small printed 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 Xerox Star computer and Microsoft Windows 1.0 }}

The icon was originally designed by Norm Cox as part of the user interface for the 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 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 Windows 2.0 in favor of a single horizontal line denoting the control menu. 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 start menu of the one-year update of 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 apps.<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 Wikipedia mobile app]]

The hamburger 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 (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 Microsoft Office 365 and Google online applications, a similar icon consisting of three rows of three squares ( 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 being revealed, generally the same as a one-item 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 visually-similar textual characters are used by designers to create a hamburger button,<ref name=just>[https://justmarkup.com/articles/2019-12-04-hamburger-menu/ Do's and Don'ts of implementing a hamburger menu] :Many use the Unicode sign for 'IDENTICAL TO' (U+2261) or the one for 'TRIGRAM FOR HEAVEN' (U+2630) to visually show the three lines. The first problem with this approach of showing the icon is, that not all browsers support these Unicode signs and also not all fonts do, which means these users will see a square □ (also called tofu or replacement Glyph instead of the three lines. </ref> such as the following:

===Hamburger button=== * {{unichar|2261|nlink=triple bar}}<ref name=just/> * {{unichar|11054|nlink=brahmi numerals}} * {{unichar|2630|nlink=}}<ref name=just/>

===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 compared to a 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 == {{wiktionary|hamburger button}} * Menu key * {{section link|Triple bar|Application design}} * {{section link|Ellipsis|In computer user interface}} – 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= |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="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="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="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 Category:Metaphors referring to food and drink