The history of the hamburger menu

It’s on basically every app now. It’s up at the top right of your browser. It’s the hamburger menu, and it’s a part of our everyday lives. The surprising thing is how long it’s been in the vernacular. Most of us really became aware of this little button a few years ago. It lurks near the top of our apps, giving us a place to tap and get more options. Take a look:

Why do they call it the hamburger menu?

I’ve seen it called hamburger, vertical ellipsis, three liney things, pretty much everything. But for user interface designers, it’s usually called the hamburger menu. I suppose you could say that it looks something like a top bun, patty, and bottom bun. Something like this seems to bridge the gap between a real hamburger and the hamburger menu icon:

 

Or, sort of. I mean you could make the argument, but really I think that someone didn’t know what to call it and they were hungry. So it became the hamburger icon. Call it what you will.

The big surprise

This article at Invision really did their homework and found not only the first ever use of the hamburger icon but its designer, Norm Cox. When the folks at Xerox were designing the first ever modern graphical user interface, Mr. Cox came up with an icon to represent a menu of “extra items.” Stuff that wouldn’t deserve an icon of its own. He wanted the icon to look like a drop down menu. Here it is, in all its glory, in the top right of the screen and in every window:

If the image is too small on your device, here’s a zoomed-in version:

At that size there can be no doubt. There’s the hamburger, or at least the three lines if you don’t think it looks like a hamburger.

This wasn’t the only thing Xerox invented

Xerox’s Palo Alto Research Center is legendary for combining the mouse and graphical interface into the first working graphical PC, the Alto. You probably never heard of the Alto because it wasn’t a mainstream box. But legend has it that both Steve Jobs and Bill Gates toured Xerox’s favility and let’s say they were, influenced by what they saw. Jobs especially, I’d say, since he came out with a computer called the Lisa a little more than a year later whose screen looked like this:

No it’s not a complete ripoff of the Alto. In fact, it’s missing the hamburger menu. But certainly you can imagine Steve Jobs coming back to his people and drawing what he saw then setting them loose to design something similar.

Bill Gates took a little longer to come up with his graphical interface, so he could take advantage of advances in color. The result doesn’t look “as much” like the original Xerox work, but it’s also not that different.

And there’s that hamburger menu. Interestingly, it would disappear in Windows version 2, but it’s there in the original version, for sure.

Tuesday at 8:30

The most interesting thing about this story is that the original designer of the hamburger menu, one of the most pervasive user interface elements in history, says he probably did it on a Tuesday at 8:30, in 10 minutes, and didn’t give it anymore thought. That’s something to think about if you’re trying to get done early by skimping on details… you never know how long your work will hang around the internet.