Fig. 21 / Hamburger Menu · In motion
Web UI Patterns
Hamburger Menu
EXPLAINED SIMPLY:A hamburger menu is the icon made of three stacked lines, usually in a top corner, that opens the navigation a site is hiding.
A hamburger menu is the icon made of three stacked lines, usually in a top corner, that opens the navigation a site is hiding. The name is literal: bun, patty, bun.
Tap the icon and the menu it hides appears: Home, Features, Pricing, Contact in the picture. Strictly, the hamburger is the icon and the panel is the menu, but in conversation the name covers both. When someone says "put it in the hamburger," they mean hide it behind the three lines.
The icon is older than the web. Norm Cox drew it for the Xerox Star in 1981, where it meant exactly what it means now: there's a menu behind this. Phones brought it back because a small screen can't afford a row of visible links.
The trade-off is the whole debate. Everything inside a hamburger menu is invisible until someone goes looking for it. I've watched teams tuck a link into the hamburger and then wonder where its traffic went. On a phone that's often the price of fitting anything at all; responsive design collapses the full menu into the hamburger when the screen narrows. On a desktop, where the links would fit just fine, hiding them anyway is minimalism at the visitor's expense.
You'll also hear "hamburger icon," "menu icon," or just "the three lines."
When you're deciding what stays visible and what gets hidden, that's the hamburger conversation.