Quick Links
Hamburger Menu---or Hamburger Icon---is a term commonly used when talking about apps. It might make you hungry, but it has nothing to do with food. Where did this silly name come from, and what does the menu do?
The History of the Hamburger Icon
The Hamburger icon---menu, symbol, button, etc.---has been around since 1981. It was created by Norm Cox, the graphics lead for the Xerox Star, the first commercial personal computer.
Norm designed the symbol as a container for menu choices. The horizontal lines are an abstract depiction of a vertical list. You can see the hamburger menu buttons in action on the Xerox Star in the video below at the 21:15 mark.
The symbol was meant to be very simple, partly due to the design constraints of the time. It could only be around 16x16 pixels, so it needed to be distinct and easily visible. Three bold lines accomplished that goal.
It wasn't until smartphones and mobile apps came around that the hamburger icon exploded into mainstream consciousness. Limited screen space means that options need to be tucked away into menus, and the hamburger icon has become a popular choice to signify that.
The history of the hamburger icon in mobile apps is a little murkier. It may have first been used by a Twitter app called "Tweetie" in 2008. Soon after that, it started showing up in Apple's iOS operating system for the iPhone, which most likely led to its popularity in mobile app design.
What Is the Hamburger Icon for?
As previously mentioned, the original purpose of the hamburger icon was to act as a menu that contained lists of options. That's where the design comes from. Menus typically include options in a vertical list, hence the three lines stacked on top of each other.
That's still what the hamburger icon is used for today, but its purpose has expanded in mobile apps. It's now commonly used for menus that slide out from the side of the screen. (This type of menu is sometimes called a "sidebar" menu.)
Here's an example of the hamburger icon being used in the Gmail app for Android. Tapping the icon opens a menu from that side of the screen.
The hamburger icon can also be found in the Windows 10 Start Menu. Hovering over or clicking the icon expands the shortcuts for Settings, Power, and other user options.
The hamburger icon is simply a symbol that has come to mean "menu." Once you start looking for it, you'll see it everywhere.
Why Is It Called a "Hamburger" Menu?
Thanks to the research of designer Geoff Alday, the history of the hamburger icon is pretty fleshed out. However, we don't really know why or when it picked up the "hamburger" nickname.
Everyone seems to agree that the nickname comes from the three lines that somewhat resemble a top bun, burger pattie, and bottom bun. But who was the first person to make that connection? We're not sure. Norm Cox only mentions jokingly calling it an "air vent" for the window.
Humans just see food in a lot of things, apparently.
The Case Against the Hamburger Menu
Not everyone is a fan of the ubiquitous hamburger icon. In recent years, app designers have started moving away from it.
The hamburger icon was designed (with strict restraints in place) to be super simple. That simplicity can sometimes be a drawback. It's not very descriptive and can easily be overlooked if you're not familiar with it.
Navigation bars have become a more popular way to organize menu items. Rather than tucking everything behind a non-descript button, multiple icons can be arranged on a bar with text. This is much easier for someone to understand.
A navigation bar doesn't work for every app, though, 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 How-To Geek's mobile website. Websites often use this design, too!)
That's a lot of talk about hamburgers and software design. All you need to know is that a hamburger menu is typically three horizontal lines in a vertical stack. Be on the lookout for three dots as well. Use these buttons when you're looking for menus and more options. Now, pass the mustard, please.
ncG1vNJzZmivp6x7qbvWraagnZWge6S7zGhua2hiZoFww8eaq2aho2KubrTAppmuqpeav265xKesZpqlqcGwuo4%3D