The Icon That Ate the Internet

It started on a machine almost nobody bought

The three-line icon is older than the web, older than the Macintosh, older than most of the people who argue about it. It debuted in 1981 as part of the Xerox Star, software built to run on Xerox 8010 workstations, the first commercially produced computer with a graphical user interface.

The designer was Norm Cox. He later described it as a “container” for contextual menu choices, roughly equivalent to the right-click context menu we use today. His stated intent was for the graphic to be road-sign simple, functionally memorable, and to mimic the look of the menu list it would open. The constraint drove the form: Cox recalled having roughly 16×16 pixels to work with, possibly less. At that size, you cannot draw a metaphor. You can draw three lines that look like a list.

Then it mostly disappeared. Windows 1.0 picked it up in 1985 for the control menu, but Windows 2.0 swapped it for a single horizontal line, Windows 95 replaced it with the program’s own icon, and the icon didn’t resurface prominently in Microsoft’s shell until the Windows 10 Start menu. For roughly a quarter century it was a footnote.

The detective work that gave it a father

Nobody knew who made it until a designer went looking. Software designer Geoff Alday researched the origin of the icon and tracked down Cox, who confirmed over email that he had designed it. That 2004 email is the source of nearly every origin story written since, including this one.

Cox himself was out of the loop entirely. He has said he wasn’t aware the icon had blown up until a reporter called to interview him about it, and had no idea people were calling it the “hamburger.”

The mobile squeeze brought it back

The revival was a math problem. Desktop navigation was a horizontal row of words, and that row does not fit on a 320-pixel screen. The mobile navigation conventions we know now were popularized alongside Ethan Marcotte’s Responsive Web Design in 2011, after which top navigation collapsing into a hamburger became the industry standard.

Native apps got there first and dragged the web along. The list-menu drawer interaction was popularized by Facebook and Path, which made it look like an elegant way to move around an app: it saved space, looked clean, and you could stuff anything into it. Facebook’s 2011 redesign shipped with two drawers, one on the left for navigation and one on the right hiding the friends list. Credit for the first mobile use is murkier; many accounts point to Loren Brichter’s Twitter client Tweetie around 2009, but the record isn’t clean.

Once Facebook did it, every product team on earth had cover to do it.

Nobody knows who called it a hamburger

This is the honest answer, and it is more interesting than a tidy attribution would be. The origin of the icon is well documented thanks to Alday’s research, but we don’t know when or why it picked up the hamburger nickname. Everyone agrees the name comes from the three lines resembling a top bun, a patty, and a bottom bun, but no one knows who made that connection first.

It wasn’t Cox. The only food-adjacent joke he’s on record for is calling it an “air vent” for the window.

The name has no author because it didn’t need one. It’s the kind of thing five hundred people independently think of in a meeting and one of them says out loud. It spread through Twitter, comment threads, and conference talks, which are exactly the venues that leave no citable first instance.

Why “navicon” lost

“Navicon” is the most serious challenger, and it had real backing. Jordan Moore wrote it up for Smashing Magazine in October 2012, and Chris Coyier ran a widely-read CSS-Tricks post two days later titled “Hamburger Menu Icons (Three Line Menu Icon / Navicon),” which openly leaned on the pun. A commenter on that post claimed to have coined “navicon” back in 1998 and noted that nobody paid attention at the time. That claim is unverifiable, which is itself part of the story.

It lost for four reasons.

It described a function that wasn’t stable. “Navicon” means navigation icon. But the three lines aren’t always navigation. They open settings, options, filters, sidebars, and drag handles. Even in 2012, developers were pointing out that the same glyph was already the standard list-view icon and the standard drag-to-reorder handle. A name that asserts a function ages badly when the function drifts. A name that describes shape never breaks.

It was a developer word, not a human word. “Navicon” reads like a CSS class. Icon fonts and frameworks shipped the glyph under flat, functional names, and those names lived in code where end users never saw them. “Hamburger” lived in conversation.

It wasn’t funny. Naming is a memetic contest, and vivid beats accurate every time. “Hamburger” is absurd, sticky, and immediately teachable to a non-designer. You can explain it in four words. You cannot explain “navicon” to your client’s CFO without explaining what “navi” is short for.

It couldn’t reproduce. This is the underrated one. “Hamburger” spawned a whole taxonomy: the kebab (three vertical dots), the meatball (three horizontal dots), the bento (grid), the döner. Once a naming convention can generate siblings, it stops being a nickname and becomes a system. “Navicon” had nowhere to go.

The other contenders never had a chance. “Three-line menu” is a description, not a name. “Menu icon” is what it should probably be called and is too boring to survive. And the Unicode options were a mess: designers reached for U+2261 (IDENTICAL TO) or U+2630 (TRIGRAM FOR HEAVEN), but font and browser support was inconsistent, and screen readers would sometimes announce the latter as “trigram for heaven.” Nobody was going to name an interface pattern after that.

The backlash it survived

By 2014 the pattern was under sustained attack. TechCrunch ran a piece calling the three-lined button “the devil,” arguing that interaction theory, A/B tests, and the evolution of top apps all pointed the same direction: hiding features behind a nondescript corner icon hurts engagement. The app zeebox reportedly found in an A/B test that the side-navigation version cut user engagement time roughly in half, an out-of-sight-out-of-mind effect. Nielsen Norman Group research is commonly cited for hidden navigation reducing content discoverability by around 21% versus visible navigation.

Native apps largely retreated to tab bars. The mobile web did not, because the mobile web has no tab bar convention and no platform enforcing one. The settled practice became a hybrid: visible navigation on desktop that collapses to a hamburger at tablet and mobile breakpoints.

The lesson underneath

An icon designed in maybe ten minutes, for a workstation that commercially flopped, under a 16-pixel constraint, became the most recognized control on the internet forty years later. Its inventor didn’t know for three decades. Its name has no author. The better-reasoned alternative name, proposed by working designers in respected publications, was crushed by a food joke.

Standards don’t get ratified. They get repeated until arguing about them is more expensive than accepting them.