The hamburger button (the

triple bar The triple bar, or tribar ≡, is a symbol with multiple, context-dependent meanings. It has the appearance of an equals sign sign with a third line. The triple bar character in Unicode is code point .. The closely related code point ...

≡ or trigram symbol ☰), so named for its unintentional resemblance to a

hamburger A hamburger, or simply burger, is a food consisting of fillings—usually a patty of ground meat, typically beef—placed inside a sliced bun or bread roll. Hamburgers are often served with cheese, lettuce, tomato, onion, pickles, bacon, ...

, is a

button A button is a fastener that joins two pieces of fabric together by slipping through a loop or by sliding through a buttonhole. In modern clothing and fashion design, buttons are commonly made of plastic but also may be made of metal, wood, o ...

typically placed in a top corner of a

graphical user interface The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inst ...

. 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

Original design

The icon was originally designed by Norm Cox as part of the user interface for the

Xerox Star The Xerox Star workstation, officially named Xerox 8010 Information System, is the first commercial personal computer to incorporate technologies that have since become standard in personal computers, including a bitmapped display, a window-based ...

, introduced in 1981; it saw a resurgence starting in 2009 stemming from the limited screen area available to

mobile app A mobile application or app is a computer program or software application designed to run on a mobile device such as a phone, tablet, or watch. Mobile applications often stand in contrast to desktop applications which are designed to run on d ...

s. 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).”

In mainstream computing

In possibly its first use after the Xerox Star, the release of

Windows 1.0 Windows 1.0 is the first major release of Microsoft Windows, a family of graphical operating systems for personal computers developed by Microsoft. It was first released to manufacturing in the United States on November 20, 1985, while the Euro ...

in 1985 contained a hamburger icon in each window's control menu. 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 Windows 95 is a consumer-oriented operating system developed by Microsoft as part of its Windows 9x family of operating systems. The first operating system in the 9x family, it is the successor to Windows 3.1x, and was released to manufacturi ...

replaced the single line with the program's icon, and the hamburger would not return to Windows until a placement on the

Start menu The Start menu is a graphical user interface element used in Microsoft Windows since Windows 95 and in other operating systems. It provides a central launching point for computer programs and performing other tasks in the Windows shell. It is name ...

of the one-year update of

Windows 10 Windows 10 is a major release of Microsoft's Windows NT operating system. It is the direct successor to Windows 8.1, which was released nearly two years earlier. It was released to manufacturing on July 15, 2015, and later to retail on J ...

Appearance and functionality

Editing Wikipedia mobile screenshot p 16, Penny Cyclopaedia with menu

The "menu" button takes the form of an

icon An icon () is a religious work of art, most commonly a painting, in the cultures of the Eastern Orthodox, Oriental Orthodox, and Catholic churches. They are not simply artworks; "an icon is a sacred image used in religious devotion". The most ...

that consists of three parallel horizontal lines (displayed as ≡), suggestive of a list. The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it. The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or vertical ellipsis ⋮ ), also known as a ''kebab icon'', ''meatball icon'' or ''falafel icon''. In the

Microsoft Microsoft Corporation is an American multinational technology corporation producing computer software, consumer electronics, personal computers, and related services headquartered at the Microsoft Redmond campus located in Redmond, Washin ...

Office 365 platform, a similar application menu consisting of three rows of three squares is displayed. Tapping, clicking or otherwise activating this button results in a

menu In a restaurant, the menu is a list of food and beverages offered to customers and the prices. A menu may be à la carte – which presents a list of options from which customers choose – or table d'hôte, in which case a pre-established seque ...

being revealed, which distinguishes it from a menu or tab bar that is always on display.

Reception

Appearance

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. The location of the hamburger menu icon depends on the specific website or app. However, the general consensus seems to be that the hamburger menu icon should be placed on the right side of the screen for most websites and apps.

Usability

The menu button may increase

interaction cost Interaction cost can comprise work, costs, and other expenses, required to complete a task or interaction. This applies to several categories, including: * Economy: the interaction cost of a purchase includes the requirements to complete it, and dif ...

compared to a bottom bar menu, requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen, in the context of

mobile apps A mobile application or app is a computer program or software application designed to run on a mobile device such as a phone, tablet, or watch. Mobile applications often stand in contrast to desktop applications which are designed to run on des ...

. It has also been argued that designers tend to overload these icons with too much hidden information.

References

{{GUI widgets Graphical control elements