A hamburger menu (also called a hamburger icon, hamburger button, or three-line menu) is a navigation UI element consisting of three stacked horizontal lines (☰) that, when clicked or tapped, reveals a hidden navigation panel. Introduced in 1981 by designer Norm Cox for the Xerox Star workstation, it became the dominant mobile navigation pattern after Facebook adopted it in 2012. The hamburger menu appears on the vast majority of responsive websites as the default mobile navigation control.
If you have ever browsed a site on your phone and tapped those three lines to find the navigation, you have used a hamburger menu.
Hamburger Menu: Key Statistics (2026)
| Metric | Value | Source |
|---|---|---|
| Origin | Designed in 1981 for the Xerox Star | Norm Cox, Xerox PARC |
| Mainstream adoption | 2012 (Facebook mobile app) | Industry consensus |
| Discoverability impact | Hidden nav reduces discoverability by ~21% | Nielsen Norman Group, 2016 |
| Label engagement lift | Adding “Menu” text increases taps by up to 20% | James Foster, UX benchmark |
| Min tap target (iOS) | 44 x 44 pixels | Apple Human Interface Guidelines |
| Min tap target (Android) | 48 x 48 dp | Google Material Design |
| Optimal animation speed | 200-300ms transition | UX best practice |
In this guide, we will cover what a hamburger menu is, where it came from, when you should (and should not) use one, and how to add a hamburger menu to your WordPress site in minutes.
What Does a Hamburger Menu Look Like?
The hamburger menu icon is one of the most recognized UI elements on the web. It consists of three horizontal lines stacked on top of each other:
☰
You will also see variations of the icon across websites:
| Icon Style | Description | Common Use |
|---|---|---|
| ☰ Classic | Three equal horizontal lines | Most websites and apps |
| ✕ Close | X icon (shown when menu is open) | Paired with hamburger to toggle |
| ⋯ Kebab | Three vertical dots | Android apps, more options |
| … Meatball | Three horizontal dots | iOS, toolbars, secondary actions |
| ☰ + Arrow | Animated transition on click | Modern web apps |
The hamburger icon itself acts as a menu button that toggles navigation visibility. When the menu is hidden, the page looks clean. When the user needs navigation, they tap the button and the full menu appears.
A Brief History of the Hamburger Menu
The hamburger icon is older than most people think. Designer Norm Cox created it in 1981 for the Xerox Star, one of the first graphical user interfaces ever built. Cox designed the icon to resemble a list of menu items — the three lines were a visual metaphor for stacked content rows.
The icon stayed mostly hidden in obscurity for decades. It made a massive comeback in 2009 when mobile-first design became the default approach for the web. As smartphones took over, designers needed a way to hide navigation menus on small screens without removing them entirely. The hamburger icon was the obvious choice.
Key moments in hamburger menu history:
- 1981 — Norm Cox designs the icon for the Xerox Star workstation
- 2009 — Mobile web adoption drives the icon back into mainstream UI
- 2012 — Facebook adopts the hamburger menu in its mobile app, making it universal
- 2014-2016 — Debate peaks: designers argue about whether hamburger menus hurt discoverability
- 2020s — The icon is fully established as a web standard, appearing on both mobile and desktop sites
Today, the hamburger menu is the default navigation pattern for mobile-first design. It appears on the vast majority of responsive websites, from small business sites to apps like Gmail, Spotify, and Slack.
How Does a Hamburger Menu Work?
The mechanism is simple:
- The navigation links are hidden off-screen or collapsed by default
- The hamburger icon (☰) is displayed in a fixed position, usually the top-left or top-right corner
- When the user clicks or taps the icon, the menu slides in from the side, drops down from the top, or fades in as an overlay
- The icon typically transforms into an X (✕) to indicate the menu can be closed
- Clicking the X or tapping outside the menu hides it again
Common animation styles include:
| Animation | How It Works | Best For |
|---|---|---|
| Slide Left/Right | Menu slides in from the side as a panel | Mobile sites, apps |
| Slide Down | Menu drops down from the header area | Desktop hamburger menus |
| Full-Screen Overlay | Menu covers the entire viewport | Minimal, modern designs |
| Push | Menu pushes the page content aside | Dashboard-style layouts |
| Fade In | Menu fades in with a semi-transparent background | Elegant, minimal UIs |
When Should You Use a Hamburger Menu?
A hamburger menu is the right choice in these situations:
Use a hamburger menu when:
- Mobile screens — There is not enough horizontal space for a full navigation bar. This is the primary use case and the one where hamburger menus are nearly universal.
- Large navigation — Your site has 10+ menu items, nested categories, or a mega menu that would overwhelm a standard navbar.
- Content-first pages — Landing pages, portfolios, or reading-heavy pages where navigation should not compete for attention.
- Desktop clean design — You want a minimalist header even on wide screens. Many modern SaaS sites and portfolios now use hamburger menus on desktop too.
- Web applications — Dashboards and admin panels where the sidebar navigation can be toggled to give more screen real estate to the content area.
Consider alternatives when:
- Small menu (3-5 items) — A visible navigation bar works better. Users should not have to click to see three links.
- E-commerce sites — Product categories need to be visible at all times. A mega menu or visible category bar is usually more effective for conversion.
- High-traffic CTAs — If your primary CTA is in the navigation (e.g., “Sign Up” or “Buy Now”), hiding it behind a hamburger reduces conversions.
Pros and Cons of Hamburger Menus
| Pros | Cons |
|---|---|
| Saves screen space, essential on viewports under 768px | Reduces content discoverability by ~21% vs visible nav (Nielsen Norman Group, 2016) |
| Creates a clean, uncluttered interface | Adds 1-2 extra taps to reach any interior page |
| Works consistently across all screen sizes | Sites using only hamburger nav see 12-20% fewer pageviews on secondary pages |
| 90%+ recognition rate among users aged 18-54 | Recognition drops significantly in users over 65 |
| Enables complex navigation (mega menus, nested items) | Task completion is measurably slower vs visible navigation bars |
| Keeps focus on content rather than chrome | Adding a “Menu” label increases engagement by up to 20%, suggesting the icon alone is not always sufficient |
The bottom line: hamburger menus are a trade-off between clean design and discoverability. For mobile screens under 768px, the trade-off is worth it because horizontal space cannot accommodate full navigation. For desktop, it depends on your design goals — many sites use a hybrid approach with visible nav on desktop that collapses to a hamburger on mobile.
Hamburger Menu Best Practices
If you are adding a hamburger menu to your website, follow these guidelines to make it effective:
1. Place the icon where users expect it
Top-left or top-right corner of the screen. Do not put it in the middle of the page or below the fold. Users have been trained to look for it in the header area.
2. Make the button large enough to tap
The minimum tap target should be 44×44 pixels (Apple’s Human Interface Guidelines) or 48x48dp (Google’s Material Design). A tiny hamburger icon frustrates mobile users.
3. Add a label if your audience skews older
Adding the word “Menu” next to the icon increases engagement by up to 20% according to Nielsen Norman Group research. Not everyone knows what three lines mean.
4. Use smooth animations
The menu should slide, fade, or push with a smooth transition (200-300ms). Instant show/hide feels jarring. But keep it fast — slow animations (500ms+) frustrate users.
5. Provide a clear close action
Transform the hamburger into an X when the menu is open. Also let users close the menu by tapping outside of it or pressing Escape on desktop.
6. Keep critical items visible
Do not hide everything behind the hamburger. Keep your primary CTA (“Sign Up,” “Contact,” “Buy”) visible in the header alongside the hamburger icon.
7. Support keyboard and screen readers
The toggle button needs proper aria-label, aria-expanded, and role attributes. The menu should be navigable with Tab and closeable with Escape. Accessibility is not optional.
How to Add a Hamburger Menu to WordPress
Most WordPress themes include a mobile hamburger menu by default, but the customization options are usually limited to basic colors and placement. If you want full control over how your hamburger menu looks and behaves, a dedicated menu plugin is the way to go.
Responsive Menu is a WordPress plugin built specifically for this. It lets you add a hamburger menu to any WordPress site — on mobile, tablet, and desktop — without writing CSS or JavaScript.
Here is what the setup looks like:
Step 1: Install the plugin
Go to Plugins → Add New in your WordPress dashboard, search for “Responsive Menu,” and click Install → Activate.
Step 2: Create a new menu
Navigate to Responsive Menu → Menus → Create New Menu. Select which WordPress menu you want to display and choose your breakpoint (the screen width where the hamburger menu appears).
Step 3: Customize the hamburger button
You have full control over the toggle button. Change the icon, size, color, position, and animation. You can use the classic three-line icon, a custom SVG, or add a “Menu” text label.
Step 4: Style the menu container
Pick your animation style (slide left, slide right, dropdown, push, overlay), set background colors, typography, padding, and hover effects. The live preview shows changes in real time.
Step 5: Set desktop behavior
By default, Responsive Menu activates on mobile screen widths. If you want a hamburger menu on desktop too, adjust the breakpoint to a larger value or set it to show on all screen sizes.
The plugin supports mega menus, touch gestures, keyboard navigation, and WCAG accessibility out of the box. The free version covers most use cases, and the Pro version adds advanced animations, conditional logic, and header bar customization.
Hamburger Menu vs Other Navigation Patterns
The hamburger menu is not the only option for website navigation. Here is how it compares to other common patterns:
| Pattern | Best For | Typical Use | Key Drawback |
|---|---|---|---|
| Hamburger Menu | Mobile sites with 7+ nav items | Most responsive websites | Adds 1 extra tap; ~21% lower discoverability |
| Top Navigation Bar | Desktop sites with 3-7 links | ~90% of desktop sites | Breaks on mobile below 768px without collapse |
| Bottom Tab Bar | Mobile apps, 3-5 core actions | ~70% of iOS/Android apps | Limited to 5 items max |
| Sidebar Navigation | Dashboards, documentation | Most SaaS admin panels | Consumes 240-300px horizontal space |
| Mega Menu | E-commerce with 50+ categories | Large e-commerce sites | Complex to build; overwhelming on mobile |
Many sites combine patterns — a visible top bar on desktop that collapses into a hamburger menu on mobile. This hybrid approach gives you the best of both worlds.
Frequently Asked Questions
Why is it called a hamburger menu?
The three stacked horizontal lines resemble a hamburger: the top line is the top bun, the middle line is the patty, and the bottom line is the bottom bun. The name caught on in the design community around 2012-2013.
Who invented the hamburger menu?
Norm Cox, a graphic designer at Xerox, created the icon in 1981 for the Xerox Star workstation’s graphical user interface. It was one of the earliest icons designed for computer screens.
Is the hamburger menu bad for UX?
No, the hamburger menu is not inherently bad for UX. On mobile devices (screens under 768px), it is the standard navigation pattern because horizontal space cannot accommodate full navigation bars. A 2016 Nielsen Norman Group study found that hidden navigation reduces content discoverability by about 21% compared to visible navigation, but this trade-off is accepted on mobile where screen real estate is the primary constraint. The best practice is a hybrid approach: visible navigation on desktop that collapses into a hamburger menu on tablet and mobile breakpoints.
Should I use a hamburger menu on desktop?
It depends on your design. If you have a minimal site with a content-first approach (portfolio, landing page, SaaS), a desktop hamburger menu works well. For content-heavy sites with many categories, a visible navigation bar is usually better.
What is the difference between a hamburger menu and a kebab menu?
A hamburger menu (☰) uses three horizontal lines and hides the main navigation. A kebab menu (three vertical dots) typically opens a small contextual menu for secondary actions like “Edit,” “Delete,” or “Share.” They serve different purposes.
How do I make a hamburger menu accessible?
Use a <button> element with aria-label="Open menu" and aria-expanded="false". Update aria-expanded to "true" when the menu opens. Ensure the menu is keyboard-navigable (Tab through items, Escape to close). A plugin like Responsive Menu handles all of this automatically.