Hamburger Menu — or Hamburger Icon — is a term commonly used to refer to applications. It can make you hungry, but it has nothing to do with food. Where does that silly name come from and what is the menu for?
The history of the hamburger icon
Norm designed the symbol as a container for menu choices. Horizontal lines are an abstract representation of a vertical list. You can see the hamburger menu buttons in action on the Xerox Star in the video below at 9:15 p.m.
The symbol was meant to be very simple, in part because of the design constraints of the time. It could only be around 16 × 16 pixels, so it had to be distinct and easily visible. Three bold lines achieved this goal.
It wasn’t until smartphones and mobile apps emerged that the hamburger icon exploded into mainstream consciousness. Limited screen space means options should be tucked away in menus, and the hamburger icon has become a popular choice to signify that.
The history of the hamburger icon in mobile apps is a bit murkier. It may have been first used by a Twitter app called “Tweeted” in 2008. Soon after, it started to appear in Apple’s iOS operating system for iPhone, which probably led to its popularity in designing mobile applications.
What is the Hamburger icon for?
As mentioned earlier, the original purpose of the hamburger icon was to act as a menu with lists of options. This is where the design comes from. Menus usually include options in a vertical list, hence the three rows stacked on top of each other.
That’s still what the hamburger icon is for today, but its focus has broadened into mobile apps. It is now commonly used for menus that slide down the side of the screen. (This type of menu is sometimes referred to as a “sidebar” menu.)
Here is an example of a hamburger icon used in the Gmail app for Android. Tap the icon to open a menu on that side of the screen.
The hamburger icon is also found in the Windows 10 Start menu. Hovering over or clicking on the icon expands shortcuts for settings, power, and other user options.
The hamburger icon is simply a symbol that now stands for “menu”. Once you start looking for it, you will see it everywhere.
Why is a “Hamburger” menu called?
Thanks to the research of the designer Geoff alday, the history of the hamburger icon is quite extensive. However, we don’t really know why or when it got the nickname “burger”.
Everyone seems to agree that the nickname comes from the three lines that look a bit like an upper bun, a burger patty, and a lower bun. But who was the first person to make this connection? We are not sure. Norm Cox only jokingly mentions calling it a “vent” for the window.
Humans only see food in a lot of things, apparently.
The case against the hamburger menu
Not everyone is a fan of the ubiquitous burger icon. In recent years, application designers have started to move away from it.
The burger icon was designed (with strict constraints in place) to be super simple. This simplicity can sometimes be a downside. It is not very descriptive and can easily be overlooked if you are unfamiliar with it.
Navigation bars have become a more common way to organize menu items. Rather than hiding everything behind any button, multiple icons can be arranged on a bar with text. It is much easier for someone to understand.
However, a navigation bar doesn’t work for all apps, so it’s still common to see the hamburger icon. What has become even more popular is the use of three dots as a menu icon, as shown below in Chrome for Android.
(Below the button, you can see a hamburger menu icon on the How-To Geek mobile website. Websites often use this design, too!)
That’s a lot of talk about burgers and software design. All you need to know is that a hamburger menu is usually made up of three horizontal lines in a vertical stack. Also be on the lookout for the three points. Use these buttons when looking for menus and other options. Now pass the mustard, please.