A Brief History of the Hamburger Menu Icon

We definitely know and have seen this hamburger icon. For example, almost every day you see the icon in the upper right corner of the Google Chrome or Mozilla Firefox browser, which is a sign for the Settings menu.

hamburger menu icon

For the world of web design, we also see debates about how to use the hamburger icon well and in which position the hamburger icon is generally placed so that users don’t get confused.

Norm Cox
Norm Cox

This Hamburger / hamburger menu icon was first designed by Norm Cox for Xerox Star, the world’s first graphical user interface. Norm Cox is the co-founder of Cox & Hall and has been a consultant for interaction/experience design since 1982. He has also designed the icon documents for the same interface. Geoff Alday is an awesome software designer who went looking for the hamburger icon creator and managed to find this video.

hamburger menu icon history
It was created in 1990, sponsored by ACM CHI, tells the history of widgets. Source: Brad Myers on Vimeo.

From there he emailed Norm Cox, who was happy to share the origin story of the hamburger icon. Here’s what he said:

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

After using Xerox Star, the hamburger icon disappeared for some time.

Hamburger Icon Revival
Newer, smaller hamburger menus, owned by smartphone interfaces, designers had to figure out how to make things fit for a screen that was only 4 inches. It’s not clear what app first used the hamburger icon on a smartphone, but what some people remember is

Voice Memos on iOS
This seems to be the oldest (outside of Xerox) to use the hamburger icon as a menu button. This happened on June 17, 2009, which is currently available on iPhone 3Gs. If you click on the menu, it will bring up a list of recordings and options.

iphone voice memo

Tweetie for iPad
Tweetie was the first app available for Twitter, created by Loren Brichter, who happened to be working at Apple at the time. This app came out in 2009 and uses the hamburger icon for lists. It seems like a mere coincidence that an Apple designer uses this.

tweetie for ipad

Facebook Makes It More Trending
Facebook also seems to have been a big contributor to the spread of using the hamburger icon for menus. It started with a Grid icon like this in 2008.

Facebook

And the number of rows increased with the Facebook app update in 2009

Facebook

And in 2010 it became just lines, no longer in the form of a grid.

facebook 3

Facebook is now using a side menu for its app, this seems to be one of the most memorable first sightings of the hamburger icon.

It seems like Apple is the biggest reason for the revival of the hamburger icon. They brought the hamburger icon to their big smartphone. Apple was a fan of the Xerox idea and they started using it in the interface, from there the massive social media apps took over and others followed suit.

Currently the hamburger icon is widely used to represent the side menu / side menu on websites and applications as lists. Some of the great applications that use it are.

Path

Path uses the hamburger menu for the navigation section.

path

Twitter Bootstrap and Navigation menu on the mobile version of the Starbucks website.

starbucks bootstrap

Here are other examples of using hamburger menus on modern websites

Example of a hamburger menu

Hamburger Menu

Use of Hamburger menu

The Future of Hamburger Menu
The hamburger icon has become a staple in apps as well as on websites, and this is likely to last a very long time, and become increasingly massive in use. The hamburger menu also seems to have been warmly welcomed by the various UX / UI communities. Some say it’s a terrible thing and should be discontinued right away and replaced with a menu or with a more useful tab bar. Some hate it but some like it.

Some people also collect websites that use hamburger menus in a simple and simple way as inspiration for other designers.

So when did you first see an icon like this ?

That’s a brief history of the ha icon