Thehamburger button ( ), so named for its unintentional resemblance to ahamburger, is abutton typically placed in a top corner of agraphical user interface.[1] Its function is to toggle a menu (sometimes referred to as ahamburger menu) ornavigation bar between being collapsed behind the button or displayed on the screen. The icon which is associated with thiswidget, consisting of three horizontal bars, is also known as thecollapsed menu icon.
The icon was originally designed byNorm Cox as part of the user interface for theXerox Star personal computer, introduced in 1981.[2] 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)."[3]
In possibly its first use after the Xerox Star, the release ofWindows 1.0 in 1985 contained a hamburger icon in each window's control menu.[4] It was short-lived, however, as the hamburger icon disappeared inWindows 2.0 in favor of a single horizontal line denoting the control menu.Windows 95 replaced the single line with the program's icon,[5] and the hamburger would not return to Windows until a placement on thestart menu of theone-year update ofWindows 10.[6]
Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available tomobile apps.[7][8][9]
In 2024,Mondelez International (the owner of the Oreo brand) publicly tried to encourage calling it an "Oreo" rather than "hamburger" menu.[10][11]
Theicon consists of three parallel horizontal lines, intended to resemble the lines of text in a small menu.[7][12] To further reduce screen it may be narrowed to three vertically stacked dots (
), this has been called akebab,meatball orfalafel button, but still pops up a normal-looking menu. In theMicrosoft Office 365 and Google online produces, a similar icon consisting of three rows of three squares (
) pops up an array of icons instead of a menu, and is referred to as awaffle button.[13]
Clicking or pressing these buttons results in a verticalmenu being revealed, generally the same as a one-itemmenu or tab bar.[14]
The hamburger button is not atextual character, and is not encoded inUnicode. However, sometimes the following visually-similar textual characters are used by designers to create a hamburger button:
It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered;[15] in particular, older users less familiar with modern iconography may find it confusing.[16] The location of the hamburger menu icon also depends on the specific website or app.[17]
The menu button may increaseinteraction 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.[18] It has also been argued that designers tend to overload these icons with too much hidden information.[16]
