hamburger button
{{short description|User interface element}}
The hamburger button (File:Hamburger_icon.svg), so named for its unintentional resemblance to a hamburger, is a button typically placed in a top corner of a graphical user interface. 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 widget, consisting of three horizontal bars, is also known as the collapsed menu icon.
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. Cox described the icon's creation, saying, "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... can't remember exactly)."{{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}}
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.{{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}} 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,{{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}} and the hamburger would not return to Windows until a placement on the start menu of the one-year update of Windows 10.{{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}}
Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available to mobile apps.
In 2024, Mondelez International (the owner of the Oreo brand) publicly tried to encourage calling it an "Oreo" rather than "hamburger" menu.{{Cite web |last=Berger |first=Eric |date=2024-04-08 |title=Oreo claims the hamburger menu as its own |url=https://www.campaignlive.com/article/oreo-claims-hamburger-menu-its-own/1868061 |access-date=2024-04-15 |website=campaignlive.com |language=en}}{{Cite web |title=Oreo craves change, turns internet’s ‘hamburger menu’ into ‘The Oreo Menu’ |url=https://www.thedrum.com/news/2024/04/09/oreo-craves-change-turns-internet-s-hamburger-menu-the-oreo-menu |access-date=2024-04-15 |website=The Drum}}
Appearance and functionality
File:Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu.png]]
The icon consists of three parallel horizontal lines, intended to resemble the lines of text in a small menu. To further reduce screen it may be narrowed to three vertically stacked dots (File:Kebab-menu-ui-icon-1.svg), 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 produces, a similar icon consisting of three rows of three squares ( File:Grid icon.svg ) pops up an array of icons instead of a menu, and is referred to as a waffle button.
Clicking or pressing these buttons results in a vertical menu being revealed, generally the same as a one-item menu or tab bar.
Similar characters
=Hamburger button=
- {{unichar|2261|nlink=triple bar}}
- {{unichar|11054|nlink=}}
- {{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; in particular, older users less familiar with modern iconography may find it confusing.{{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}} The location of the hamburger menu icon also depends on the specific website or app.{{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}}
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. It has also been argued that designers tend to overload these icons with too much hidden information.
See also
{{wiktionary|hamburger button}}
- Menu key
- {{section link|Triple bar|Application design}}
- {{section link|Ellipsis|In computer user interface}} – used to indicate "More", or partially hidden options whereas the collapsed menu icon signify completely hidden options
References
{{reflist|2|refs=
{{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 }}
{{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 }}
{{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 }}
}}
{{GUI widgets}}