Tap the three stacked lines in a phone header and a list of links appears. Tap again and the header goes back to holding a logo and not much else. That swap is the whole point of the pattern.
It shows up in mobile apps, on responsive sites, and increasingly in desktop headers that have no real space problem to solve. Interface designers weigh it against visible and combination navigation rather than reaching for it automatically.
One thing worth knowing before that argument starts: Nielsen Norman Group’s 2025 icon-recognition research found that most participants correctly identified the icon as a hidden menu on sight, a reversal from the confusion its original 2016 usability testing recorded.
What Is a Hamburger Menu?
Three horizontal lines, stacked, sitting inside a tappable square. Press it and a hidden list of links opens.
It belongs to the broader family of collapsible navigation controls, sitting alongside drawers and dropdown toggles as a way to hide options until they’re needed.
What separates it from a dropdown is how completely the menu disappears. Nothing about it is visible until the icon fires, which leaves the header free for a logo, a search field, or nothing at all.
The lines usually swap for an X once the menu opens. Past that there isn’t much to it. A menu trigger, one small tap target, and a list of primary links behind it.
The pattern exists because a full-width menu bar doesn’t fit onto a narrow phone screen without wrapping onto two or three lines, which is exactly the pressure that made it a fixture of responsive design.
Amazon’s mobile app tucks its entire category list behind one, and so do plenty of news and shopping apps that need to fit dozens of links into a header the width of a thumb.
Where Did the Hamburger Menu Come From?
The icon dates to 1981, when designer Norm Cox drew it for the Xerox Star at Xerox PARC. That’s decades before any phone needed it.
Cox wasn’t naming a food item. He was solving a pixel problem.
Norm Cox and the Xerox Star
The Star’s display ran in black and white at 72 dpi, and Cox had roughly 16×16 pixels to render every icon on the system.
In an interview later published by Gizmodo, Cox said the icon had to be “road sign simple” and distinct enough to read at that size, so he stacked three flat lines to stand for a list of hidden choices.
No color was available. No shading, no fine detail either. The shape had to read at thumbnail size and hint at “list” without spelling the word out, and three bars did that better than anything else he tried.
Why It Is Called a Hamburger
The name is a joke that stuck. Three stacked bars look enough like a bun, patty, and bun that the nickname outlived the more technical label Cox actually used.
Inside Xerox, the lines were nicknamed an “air vent,” a wink at how they resembled cooling slats on the window. “Hamburger” is the name that eventually spread outside the building, first among designers and then everyone else.
The Long Gap and the Smartphone Comeback
After the Xerox Star, the icon mostly disappeared for almost three decades. Bigger screens made a hidden menu pointless, so interface designers moved on to other conventions.
It resurfaced once smartphones shrank the available screen back down to a few inches.
The return happened fast:
- 2008: Facebook’s mobile app uses a two-row grid icon for its menu
- 2009: the grid grows to three rows
- 2010: Facebook switches to the three-bar hamburger, and other apps follow
Within a few years the icon had spread from Facebook to most major mobile apps and, not long after, to full desktop sites.
What Does the Hamburger Menu Icon Look Like?
Three equal-length horizontal lines, evenly spaced inside a square tap area. That’s the default, and most sites don’t deviate from it.
Most implementations render it as an SVG element or an icon-font glyph, since both scale cleanly across screen sizes without blurring.
The Three-Line Symbol
The lines are almost always the same length and thickness, with consistent gaps between them so the shape reads as one unit rather than three separate marks.
Line weight typically runs 2 to 3 pixels. The tappable icon itself usually sits somewhere between 24×24 and 32×32 pixels. Color rarely gets its own treatment, matching whatever the header’s text or icon color already is.
Font Awesome ships the shape as its “bars” glyph, and Bootstrap’s default navbar toggler uses the same three-line mark out of the box.
The Open State
Leaving three lines sitting there while the menu is open reads as broken, so the icon almost always changes once fired. Usually to an X.
Some builds just replace it outright with a separate close icon the instant the menu opens. Others animate it, rotating the top and bottom lines into an X while the middle line fades out, so a single element does both jobs.
As one of many prebuilt user interface components, the icon ships ready-made in most icon libraries and component kits, so designers rarely draw it from scratch.
How Does a Hamburger Menu Work?
One toggle handles everything. A click or tap opens the hidden menu, and a second one closes it again.
What happens visually during that toggle depends on which reveal pattern the site uses.
| Pattern | How It Opens | Typical Use |
|---|---|---|
| Drawer | Slides in from the left or right edge | Mobile apps, off-canvas navigation |
| Overlay | Fades or expands over the full screen | Full-screen mobile menus |
| Dropdown | Drops down from the icon itself | Compact menus, desktop headers |
Click or Tap to Open
The trigger is almost always a single click or tap event bound to the icon’s button element.
That event runs a short JavaScript menus function that adds or removes a class controlling the menu’s visibility. Nothing about the interaction requires a second click elsewhere on the page.
Under the hood, all the toggle does is flip a CSS class on the menu container, which in turn changes its display, transform, or opacity property. That’s the entire mechanism.
Drawer, Overlay, and Dropdown Patterns
How the hidden content arrives changes how it feels, and there are only a few common approaches.
The most common by far is the drawer, which slides the menu in from off-screen and pushes or overlaps the page content while it’s open.
An overlay expands to cover the visible screen instead, which suits sites that want the menu to feel like its own destination rather than a panel hanging off the side.
A dropdown keeps things smaller, unfurling a short list directly beneath the icon without taking over the page.
Nielsen Norman Group’s 2016 navigation study tested this exact hidden-menu behavior on Slate and Business Insider UK, two of the six sites in that research.
How Do You Build a Hamburger Menu?
A button, a hidden container, and a script that toggles a class between them. Everything else is decoration.
Site owners who want the pattern without a framework can build one with a short CSS hamburger menu snippet and a handful of lines of JavaScript.
- Add a button element with three spans or a background SVG inside it to represent the lines
- Style the button and hide the target menu off-screen or behind opacity 0 by default
- Add a media query breakpoint so the icon only shows below a set viewport width
- Bind a click event that toggles an “open” class on both the button and the menu
- Use CSS transitions on that class to animate the slide, fade, or morph
Every step past the first two is optional polish. The button, the hidden container, and the toggle are the only parts that actually matter.
Building It With Bootstrap
Bootstrap ships a ready-made toggler as part of its Bootstrap navbar component, so most teams never write the icon markup by hand.
You get the .navbar-toggler class already styled and sized, breakpoint classes that hide the toggler above a chosen screen width, and collapse behavior wired through data attributes with no custom script involved.
Teams that need custom animation or a different open state usually override the default styles rather than replace the whole component.
Building It With React
A React version usually tracks the open state with a single boolean, then conditionally applies a class or renders the menu based on that value.
The click handler flips that boolean. The animation, the layout, and the accessibility attributes all read from the same value, which keeps them from drifting out of sync.
Component libraries built for React often package the icon, the toggle logic, and the animation together. One import instead of writing the toggle by hand.
How Is a Hamburger Menu Made Accessible?
The button has to announce its state, the focus order has to stay predictable, and the target has to be big enough to hit. Miss any of those and web accessibility standards aren’t met, whatever the icon looks like.
Screen reader users and keyboard users hit walls here that a mouse-driven design never accounted for.
ARIA Attributes and Labels
Three lines convey nothing to a screen reader on their own, so the trigger button needs an accessible name.
The W3C’s ARIA Authoring Practices Guide documents this exact control under its disclosure pattern, built around a button and the content it shows or hides.
The attributes required:
- aria-label=”Menu” or similar, naming the control for assistive tech
- aria-expanded=”false” by default, flipped to “true” once the menu opens
- aria-controls pointing to the id of the menu it opens
These are covered in more depth under general ARIA guidance, since the same attributes apply to any show or hide control, not just this one.
Keyboard Focus Order
A sighted mouse user can see the menu open. A keyboard user needs the interface to move focus somewhere sensible the moment that happens.
Done properly, focus moves into the opened menu, Tab cycles through its links in order, and Escape closes the menu and returns focus to the button that opened it.
Skipping this is one of the most common accessibility failures in hand-built hamburger menus. The visual open state and the keyboard’s actual focus position drift apart with no warning to the user at all.
Screen Reader Behavior
When the aria-expanded value flips, most screen readers announce the state change on their own, so users hear “expanded” or “collapsed” without any extra work from the developer.
WCAG 2.2, published in 2023, sets a floor on top of that through Success Criterion 2.5.8: interactive targets, including this button, need at least 24 by 24 CSS pixels of tappable area at the AA level.
The stricter AAA version of that same rule, Success Criterion 2.5.5, raises the floor to 44 by 44 CSS pixels.
Menus built below either size are technically clickable and still fail the people the size requirement exists to protect.
Is the Hamburger Menu Good for Usability?
Nielsen Norman Group’s research shows hiding a site’s main navigation behind a hamburger icon cuts discoverability by roughly half compared to menus that stay visible.
That single finding sits at the center of most hamburger menu debates, and it holds up across more than one study.
The 2016 navigation study is where the hard numbers come from:
- 179 participants tested across 6 live websites, both desktop and mobile
- SupermarketHQ, which combined visible and hidden navigation, saw navigation used on 89% of mobile visits
- Bloomberg, which hid navigation behind a low-visibility icon, saw navigation used on just 44% of mobile visits
- Time to find the navigation ran 24 seconds on SupermarketHQ versus 33 seconds on Bloomberg
NN/g revisited the hamburger icon in a 2025 update. That update found the icon itself is now far more recognizable to users than it was back in 2016, but its authors were careful to note that the update tested icon recognition only. It did not re-measure whether task success, time on task, or satisfaction have changed since the original findings above.
Where the Research Points
The gap between SupermarketHQ and Bloomberg wasn’t really about the hamburger icon itself. It came down to visual salience, placement, and whether the icon looked tappable at all.
Bloomberg put the icon next to the logo, and many test participants read it as part of the banner rather than a button. SupermarketHQ paired its hidden menu with a labeled Browse button and repeated the navigation block at the bottom of the page, which gave people a second shot at finding it.
What This Means for Usability and User Experience
A hamburger menu isn’t automatically a bad choice. It just starts every design at a disadvantage that a visible menu bar doesn’t carry.
Closing that gap takes deliberate work: a visible label, strong contrast, consistent placement, and enough visual weight that the icon doesn’t blend into the header around it.
What you’re buying is screen space. What you’re paying is a navigation control that a meaningful share of visitors will search for or simply miss, which is a direct hit to the site’s overall usability.
Sites that treat the icon as a finished feature instead of a design problem tend to be the ones whose user experience research turns up the lowest engagement numbers.
Where Should a Hamburger Menu Be Placed?
Top-left or top-right corner of the header, and the choice between them follows platform convention more than personal taste.
Google’s Material Design points designers toward the top-left corner specifically, as part of its broader navigation drawer guidance.
Top Left vs Top Right
Android and most of the mobile web put it on the left, largely because Material Design’s own navigation drawer pattern points there by default.
The right corner shows up more on iOS, and on sites that already have a logo or wordmark on the left. Putting the icon opposite the brand mark balances the header instead of making the two compete.
Gmail’s Android app keeps its drawer icon in the top-left corner, matching Material Design’s own pattern for a sidebar navigation control.
Neither corner is objectively correct. Consistency with the platform’s other apps matters more than the specific side chosen.
Mobile vs Desktop Placement
On mobile the icon usually sits inside a fixed header that stays in view, so its exact vertical position barely matters once it’s above the fold.
Desktop is trickier. More header space means more competing elements, and the icon has to hold its own against a logo, a search bar, an account menu, and a cart.
Below the breakpoint set in a media query, the full navigation bar collapses and the icon appears. Above it, the icon usually disappears entirely and the full link list takes its place.
Sites that show both the icon and the full nav bar at the same screen size are rare, and usually a sign of an incomplete responsive implementation rather than a deliberate design choice.
How Does a Hamburger Menu Compare to Other Navigation Icons?
The food naming didn’t stop at the hamburger. Kebab, meatball, and bento icons all describe different kinds of hidden content, and each shape signals something specific.
Mixing them up on the same interface confuses the exact visual shorthand they’re supposed to provide.
| Icon | Shape | Typical Use | Common Platform |
|---|---|---|---|
| Hamburger | Three horizontal lines | Primary site or app navigation | Mobile web, apps |
| Kebab | Three vertical dots | Inline options for a single item | Android, Material Design |
| Meatball | Three horizontal dots | Secondary actions, page-level options | iOS, toolbars |
| Bento | Grid of small squares | Switching between apps or tools | Google Play Store, product suites |
The kebab menu, three dots stacked vertically, opens an inline list of actions tied to one specific item, like a single row in a table or a single post in a feed. Chrome’s browser toolbar uses this exact icon for its own settings and options menu, a use case entirely separate from site-wide navigation.
Turn those dots sideways and you get the meatball menu, which usually points to secondary actions rather than a full navigation structure. It reveals a shorter, flatter list than a hamburger typically does. Think two to five actions, not an entire site map.
The bento menu looks nothing like the other three. It’s a small grid, echoing the compartments of an actual bento box.
Google’s own app launcher, the nine-dot grid next to the Gmail inbox, is a bento menu used to jump between different Google products rather than to reveal a dropdown of page-level options.
Icon libraries tend to ship all four shapes together. Bootstrap icons includes the three-line, three-dot, and grid variants as separate, ready-to-use glyphs.
When Should You Use a Hamburger Menu?
Tight screen space, a long list of destinations, and an audience that already knows what the icon does. Those conditions together make it a reasonable pick.
Nielsen Norman Group’s navigation research backs a specific threshold: sites with 4 or fewer top-level links should keep them visible, and only sites with more should consider hiding some behind a menu.
Google’s Material Design reaches a similar number from a completely different angle, recommending a navigation drawer once an app passes 5 top-level destinations rather than fewer.
Two organizations landing on almost the same number independently is a useful signal. Four or five links is roughly where visible navigation stops scaling on its own.
Good Fits for the Pattern
Apps with eight, ten, or more equal-weight sections rarely fit a tab bar, which gets crowded past four or five items. Something has to hold the overflow.
Narrow screens force the same decision. Once the viewport gets too tight for a full link list to fit on one line, the icon is the least disruptive way out.
And users who already tap the icon daily in other apps bring that expectation with them, which lowers the learning cost on a new one considerably.
Notion and Linear both collapse their sidebar into an icon on desktop once the workspace, not the navigation, becomes the focus of the screen.
Weighing the Trade-Off
In its favor:
- Frees up header space for a logo, search bar, or call-to-action
- Keeps a long list of destinations from overwhelming a small screen
- Matches an icon most users already recognize
Against it:
- Cuts navigation usage compared with a visible bar
- Adds an extra click between the user and every destination
- Performs worse on desktop than on mobile
Ultra-minimal brand and portfolio sites sometimes hide navigation on purpose as a stylistic choice, leaning on minimalist design even on desktop, where the icon otherwise underperforms.
That works only when the audience already knows the brand and the hidden list holds a handful of items, not a full site map.
When Does a Hamburger Menu Not Work?
The moment it hides something a visitor actually needed. Desktop screens are where that failure shows up most.
Nielsen Norman Group’s research is direct on this point: on desktop, people used a hidden menu in only 27% of cases, against 48% for visible navigation and 50% for a mix of the two.
Warning signs on a live site:
- Task completion times run noticeably longer than on comparable pages with visible links
- Analytics show the menu icon getting far fewer clicks than the content it hides deserves
- Support tickets or user tests mention visitors “not finding” a page that’s actually one click away
High-Traffic E-Commerce Navigation
Hiding category links behind an icon adds a step at the exact moment a shopper is deciding whether to keep browsing. That’s the worst possible moment to add friction.
One documented A/B test on PartyCasino’s mobile site replaced the hamburger icon with a labeled “Deposit” button in the header for logged-in users, and deposits rose once the destination stopped hiding behind an unlabeled icon (Conversion Uplift).
Swapping a hidden icon for a direct call-to-action button worked because it removed a full step between intent and action.
Retail sites that must hide something on mobile tend to do better keeping the icon for secondary links only, while putting cart, search, and top categories in view.
Desktop Sites With Few Menu Items
Nielsen Norman Group’s guidance here is blunt: skip hidden navigation on desktop entirely, and put top-level links across the top of the page or down the side instead.
The cost is measurable. People were at least 39% slower to complete tasks when navigation was hidden, compared with visible or combo navigation on the same sites.
Independent iOS design reviews note that most apps dropped the hamburger icon once tab bars proved far more discoverable in practice, and Airbnb’s app moved from a hamburger-driven menu to a bottom navigation bar for exactly that reason.
On desktop specifically, there’s rarely a reason to hide four or five links that would otherwise fit above the fold without crowding the header.
Government services follow a related principle without defaulting to the hamburger pattern. The GOV.UK Design System’s own guidance pushes teams to simplify the journey first, and where a menu does appear, it collapses behind a script-driven toggle only on narrow screens rather than hiding by default at every size.
FAQ on What Is A Hamburger Menu
What common mistakes happen when implementing a hamburger menu?
The most common failure is skipping keyboard access: a menu that only opens on click locks out anyone tabbing through the page. Missing aria-expanded, oversized tap targets, and forgetting a visible label also show up often in hand-built implementations.
Is the hamburger menu still used in 2026?
Yes. It remains standard on mobile web and across mobile apps, though Airbnb and other platforms have shifted toward bottom navigation bars. Nielsen Norman Group’s 2025 verdict calls it viable but not universal, useful under space constraints rather than by default.
Does a hamburger menu hurt SEO or crawlability?
Not if the links exist as real anchor tags in the HTML, even while visually hidden. Search engines render JavaScript and index links present in the DOM. Problems only appear when navigation loads exclusively after a click, with no crawlable markup beforehand.
Can a hamburger menu be used on a desktop website?
Technically, yes: the same button, container, and toggle work at any screen width. Nothing in HTML, CSS, or JavaScript restricts it to mobile. Usability research still recommends visible navigation on desktop, where screen space rarely justifies hiding the menu.
Is “hamburger icon” the same as “hamburger button”?
Close enough to use interchangeably. Hamburger icon refers to the three-line graphic itself; hamburger button describes the clickable control that contains it, usually a native HTML button element wrapping that graphic. Most writing treats the two terms as synonyms.
Is there a keyboard shortcut for opening a hamburger menu?
No universal shortcut exists. Keyboard users reach the control by pressing Tab until it gets focus, then Enter or Space to open it, the same activation pattern as any standard button following the W3C’s disclosure design.
Did Aza Raskin invent the hamburger menu instead of Norm Cox?
No credible record supports that claim. Norm Cox designed the icon in 1981 for the Xerox Star at Xerox PARC, and his own account of the process is well documented. No source ties its invention to Aza Raskin.
What Should You Fix First When What Is A Hamburger Menu Underperforms?
Start by auditing contrast and click data, not the code. A washed-out icon or an unlabeled trigger accounts for more lost engagement than the choice of navigation pattern itself.
Work through these before any redesign, roughly in this order:
- Contrast ratio between the icon and its header background
- Click-through data on the trigger itself, not just the menu contents
- A fallback path, such as in-page links, for content the icon hides
None of it helps once contrast falls under 3:1 against the background, the floor the W3C’s Non-text Contrast criterion (1.4.11) has required since WCAG 2.1 in 2018. Below that ratio, click-data tuning fixes nothing.
Fixing contrast and fallback paths on this one control is a small piece of a larger discipline: building accessible UI components across every interactive element on a site, not just the menu trigger.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
