What is a Hamburger Menu in UI Design?

Three horizontal lines. One tap. Every piece of navigation a site has, hidden behind the simplest icon on the screen.

That is a hamburger menu. And despite being one of the most debated UI patterns in web design, it appears on the majority of mobile sites built today.

This guide covers what a hamburger menu is, how it works, where it came from, and when you should, or should not, use one. You will also find the accessibility requirements, the main design system implementations, and the alternatives worth considering.

What is a Hamburger Menu?

A hamburger menu is a user interface button made of 3 horizontal stacked lines that reveals a hidden navigation panel when clicked or tapped. It sits in the corner of a screen and acts as a container for collapsed nav links, keeping the interface clean until the user needs to move somewhere.

The name comes from what it looks like: two buns and a patty stacked on top of each other.

Core function: The hamburger menu button hides primary navigation behind a single icon, freeing up screen space for content. It exists in 2 states: collapsed (only the 3-line icon is visible) and expanded (the full nav panel is displayed).

Nielsen Norman Group research shows that 84% of e-commerce sites use the hamburger menu button, making it one of the most widely adopted mobile navigation patterns on the web.

Standard placement is the top-left or top-right corner of a screen. On mobile, top-right placement is more common since most users hold phones in their right hand, putting that corner closer to the thumb.

The hamburger menu is a foundational component of responsive design, collapsing full desktop navigation bars into a single button on smaller viewports.

What Does a Hamburger Menu Look Like?

The hamburger menu icon is 3 horizontal lines of equal width, evenly spaced vertically, typically rendered at 24x24px with a minimum touch target of 44x44px.

It is one of the most recognized symbols in web and mobile design. That said, research shows that 47.6% of users aged 45 to 65 do not immediately recognize what the three-line icon means (Decoding Digital).

How the Icon Is Built

Common construction methods:

• SVG version: 3 <rect> or <line> elements inside an <svg> tag, scales at any size without quality loss
• Pure CSS version: 3 <span> elements or ::before and ::after pseudo-elements
• Icon font version: a single character mapped to a Unicode point (Font Awesome uses f0c9)

SVG is the most recommended format. It stays sharp on retina displays and allows CSS animation to transform the 3 lines into an X (close icon) on open state.

Active State and Animation

When the menu opens, the icon typically animates into an X shape. This is done using CSS keyframes that apply rotate() and translateY() transforms to each line.

The animation confirms to the user that the menu is now open and tells them how to close it. Without it, users sometimes tap the icon a second time not knowing the panel already opened off-screen.

Size and Color

Apple’s Human Interface Guidelines and WCAG 2.5.5 both set the minimum touch target at 44×44 pixels. Many hamburger icons render the visual at 24px but pad the clickable area to meet this requirement.

Color contrast matters here too. WCAG 1.4.11 requires a minimum contrast ratio of 3:1 for non-text UI components against their background. A light gray icon on a white header fails this standard.

Where Did the Hamburger Menu Come From?

Norm Cox designed the 3-line icon for the Xerox Star workstation in 1981. The Xerox Star was one of the first commercial computers with a graphical user interface, and the icon was created to solve a specific space problem: navigation lists were growing too long to display inline.

Cox described the goal: the design needed to be “road sign simple, functionally memorable, and mimic the look of the resulting displayed menu list.” He was working with just 16×16 pixels.

The Gap Years (1981 to 2009)

After the Xerox Star, the icon essentially disappeared. Desktop computers had enough screen space to show full navigation bars, so there was no practical need for a collapsed menu trigger.

The hamburger pattern stayed dormant for nearly 3 decades.

Mobile Revived It

The iPhone launched in 2007. By 2009, mobile web browsing was growing fast enough that designers needed a way to fit desktop-style navigation onto small screens.

Facebook adopted the hamburger menu around 2009 for its mobile app, and that single decision pushed the pattern into mainstream use. By 2012 to 2014, Bootstrap’s collapsible .navbar-toggler component made it the default pattern for responsive web builds.

Today, mobile devices account for 62.54% of global website traffic (StatCounter, Q4 2024). That number is a big part of why the hamburger menu became so universal: most of the web is now viewed on screens where full navigation bars simply do not fit.

The Pushback

Ironically, Facebook, the company that popularized the hamburger menu, later ran internal tests showing that exposed navigation drove deeper user engagement. They moved away from the pattern on certain products.

Spotify saw a 30% increase in menu engagement after switching from a hamburger to a tab-based navigation system (Decoding Digital). That finding accelerated the broader conversation in the UX community about whether hiding navigation was worth the trade-off.

How Does a Hamburger Menu Work?

The hamburger menu works through a toggle mechanism. A click or tap on the button fires a JavaScript event that adds or removes a CSS class (commonly .is-open or .nav-active) on the nav panel or parent element.

That class change triggers a CSS transition that shows or hides the navigation panel.

How the Toggle Mechanism Works

The simplest implementation uses about 10 lines of JavaScript. The button has an event listener attached. On click, it toggles a class on the target nav element.

Key parts of the interaction:

• Button element fires a click event
• JS toggles a class on the nav panel (e.g., classList.toggle('is-open'))
• CSS transitions handle the visual animation (slide, fade, or expand)
• The aria-expanded attribute updates between true and false on each toggle

In React, this is handled with useState. In Vue.js, v-if or v-show controls visibility. The logic is the same across frameworks; only the syntax changes.

How the Navigation Panel Behaves on Open

The nav panel can open in several ways depending on implementation. Each one involves different CSS properties.

The slide-in drawer is the most common pattern. Users have seen it on enough apps (Gmail, Airbnb, Spotify) that they expect it by default.

What Are the Different Types of Hamburger Menus?

There are 5 main structural variants of hamburger menu implementations. Each handles navigation differently in terms of how the panel opens, how it relates to page content, and how much of the screen it occupies.

Slide-In Drawer Menu

The panel slides in from the left or right edge, overlaying the content without moving it. This is the most common off-canvas navigation pattern.

Best for: sites with 6 to 15 navigation links, where a full-screen takeover would feel too heavy.

Gmail and Google Drive use this pattern on mobile. The drawer sits below the header, keeping the top bar visible.

Full-Screen Overlay Menu

The panel expands to cover the entire viewport. Navigation links are usually displayed at large type sizes, centered or left-aligned.

• Works well for sites with few primary navigation items (4 to 6)
• Common in portfolio sites and agency websites where the navigation opening is itself a design moment
• Slower to dismiss than a drawer, which can frustrate users on task-oriented sites

Push Menu

How it works: instead of overlaying content, the panel pushes the main content to the side as it opens. The page itself shifts right (or left) by the width of the nav panel.

This pattern makes it visually clear that the menu is a separate layer, but it increases layout reflow. On slower devices the push animation can stutter.

When Should You Use a Hamburger Menu?

Use a hamburger menu when the viewport is too narrow to display navigation links horizontally, and when the site has more than 5 primary navigation items.

Those 2 conditions together make the hidden nav pattern a reasonable trade-off. Below 5 items, there are usually better options.

Conditions That Justify Using It

Mobile devices generated 62.54% of global web traffic in Q4 2024 (StatCounter). At that scale, designing for small screens is not optional, and the hamburger menu is the most established solution for fitting complex navigation into limited screen space.

Use it when:

• Screen width is below 768px
• Navigation contains 6 or more primary links
• The design requires a clean, minimal header
• Secondary or utility navigation needs to be accessible but not prominently displayed

When to Avoid It

On desktop, hamburger menus consistently underperform against visible navigation. Nielsen Norman Group found that hiding navigation causes a more than 20% drop in content discoverability compared to visible or combination navigation.

Skip the hamburger menu when the site has 3 to 4 navigation links. Those fit comfortably in a visible top bar even on mobile. Tucking them behind a button just adds an unnecessary tap.

Also avoid it as the only navigation pattern on desktop. A site that forces desktop users to click a hamburger to find basic pages is sacrificing discoverability for visual tidiness.

What Are the Usability Problems with Hamburger Menus?

Hamburger menus have real, documented usability problems. They are not theoretical concerns. Several controlled studies have measured the drop in performance when navigation is hidden.

Discoverability Drops

Nielsen Norman Group measured a more than 20% decrease in content discoverability on sites using hidden navigation compared to visible navigation, across both mobile and desktop. Users were less likely to complete tasks successfully and spent more time trying.

The core issue is “out of sight, out of mind.” When users cannot see navigation options, they often forget those options exist.

Icon Recognition Is Not Universal

Almost half of users aged 45 to 65 (47.6%) do not know what the 3-line icon means (Decoding Digital research).

Adding the word “Menu” next to the hamburger icon consistently improves engagement. In one documented test, simply changing the label from “Explore” to “Menu” next to the hamburger icon increased menu engagement by 57%.

Accessibility Failures

3 common implementation failures:

• Icon smaller than 44x44px touch target, making it hard to tap accurately for users with motor impairments
• Missing aria-expanded attribute, leaving screen reader users with no indication of menu state
• No focus trap inside the open menu, so keyboard users tab out of the panel into hidden page content

These failures are not edge cases. UXPin notes that many deployed hamburger icons are smaller than the 44px minimum, and unlabeled hamburger buttons are still common even on high-traffic sites.

Interaction Cost

Every navigation item behind a hamburger requires at least 2 taps to reach: one to open the menu, one to select the link.

That extra step compounds across sessions. For sites where navigation is a frequent action (news sites, e-commerce, documentation), the added interaction cost measurably reduces engagement. Spotify’s 30% engagement increase after moving to tab navigation is the most-cited real-world example of this effect.

What Are the Alternatives to a Hamburger Menu?

Hidden navigation is not the only option for mobile-first design. There are 4 established navigation patterns that keep links visible and reduce the interaction cost that comes with a collapsed menu button.

Spotify’s shift from a hamburger menu to a bottom tab bar resulted in users clicking 30% more on menu items and 9% more overall (BrillMark A/B testing analysis). That single case study accelerated the conversation across the product design community.

Tab Bar Navigation

A tab bar places 3 to 5 navigation icons along the bottom of the screen. Users reach any primary section in a single tap from anywhere in the app.

The bottom position also works with thumb ergonomics. Most users hold phones in one hand, and the bottom of the screen is the easiest area to reach without shifting the grip.

Used by: Instagram, Google Maps, Airbnb, YouTube. Apple’s Human Interface Guidelines actively recommend the tab bar over hamburger menus for iOS apps with distinct top-level sections.

Priority+ Navigation Pattern

Priority+ shows the most-used navigation links directly in the header. Any links that do not fit are collapsed into a “More” button or a small overflow menu.

This pattern gives users the best of both approaches: the most important destinations stay visible, and the nav never overflows its container on small screens.

Practical split: keep 3 to 4 primary links exposed, collapse the rest. A product designer at Siemens documented a 38% increase in feature engagement after restructuring a field service app this way, moving 4 top features to a visible tab bar and pushing the remaining 8 items into a “More” tab (Simanta Parida, 2025).

How Do You Build an Accessible Hamburger Menu?

ARIA attributes and semantic HTML are both required for an accessible hamburger menu. Without them, keyboard-only users and screen reader users cannot operate the component or understand its current state.

Web accessibility compliance is not optional for most commercial sites. WCAG 2.1 Level AA is the standard referenced in most accessibility laws, including the EU Web Accessibility Directive and the US ADA web guidance.

The Button Element Requirement

The hamburger trigger must be a <button> element. Not a <div>, not an <a> tag.

A native button element gets keyboard focus automatically, responds to Enter and Space key presses without extra JavaScript, and is announced correctly by screen readers. Using a div requires manually adding tabindex="0", keyboard event listeners, and a role attribute. That is 3 extra steps to replicate behavior that a button gives for free.

Required ARIA Attributes

4 attributes that every accessible hamburger menu needs:

• aria-expanded: toggles between “true” and “false” on each click to announce menu state
• aria-controls: links the button to the nav panel by matching the panel’s ID
• aria-label: provides a text description for the button since the 3-line icon has no visible text
• aria-hidden=”true” on the icon itself: hides the decorative SVG from screen readers since aria-label already covers the button

The aria-expanded attribute must update dynamically on every toggle. A static value defeats the purpose entirely.

Focus Management

When the menu opens, keyboard focus must move into the nav panel. When the menu closes, focus must return to the hamburger button.

Without this, a keyboard user who opens the menu is left with their cursor still sitting behind the overlay. They tab forward into content they cannot see.

The Esc key should close the menu and return focus to the trigger. W3C’s WAI-ARIA Authoring Practices confirm this as the expected keyboard interaction for disclosure menus.

Focus Trap for Overlay Menus

Full-screen overlay menus require a focus trap. This keeps Tab and Shift+Tab cycling inside the open menu rather than reaching behind it into hidden page content.

2 common implementations:

• The focus-trap npm library (widely used, well-maintained)
• Custom JavaScript that listens for Tab on the last focusable element and loops back to the first

Slide-in drawer menus that do not cover the full viewport may not require a strict focus trap, but the navigation panel should still receive focus on open.

How Do Design Systems Handle the Hamburger Menu?

Major design systems each take a different approach to the nav toggle component. Some build it in with full ARIA support. Others actively discourage it.

The differences matter for teams that follow a specific system. Knowing what your chosen framework provides (and what it leaves out) avoids accessibility gaps on ship.

Bootstrap 5

Bootstrap 5’s .navbar-toggler component is the most widely deployed hamburger menu implementation on the web. It ships with aria-expanded, aria-controls, and aria-label="Toggle navigation" pre-configured.

The collapse behavior is handled by Bootstrap’s JavaScript bundle. No custom toggle logic needed. You can check real-world CSS hamburger menu patterns and the Bootstrap navbar component to see how these two approaches differ in implementation.

Material Design 3

Specification details:

• Calls the pattern a “navigation drawer” triggered by a menu button
• Icon size: 24dp, touch target: 48dp minimum
• Drawer can be modal (overlays content) or standard (shifts content)

Google’s own apps (Gmail, Google Drive) follow Material Design 3 specs for their hamburger-triggered drawers on Android.

Apple Human Interface Guidelines

Apple’s HIG actively discourages hamburger menus on iOS. The official guidance recommends tab bars as the primary navigation pattern for iPhone apps.

The reasoning is consistent with NN/g’s research: visible navigation outperforms hidden navigation on discoverability metrics. Apple’s position has not shifted since 2014.

Tailwind CSS

Tailwind provides no hamburger menu component out of the box. The utility-class approach means toggle behavior requires either Alpine.js, Headless UI, or custom JavaScript.

Well, it is framework-agnostic by design, so this is not a gap so much as a deliberate choice. The Tailwind navbar pattern relies on external logic for any interactive state management.

What Is the Hamburger Menu Icon Made Of?

The 3-line icon can be built 3 different ways. Each method has trade-offs in file size, animation capability, and accessibility.

Most common construction methods:

• SVG inline: 3 <rect> or <line> elements inside an <svg> tag. Fully scalable, animatable with CSS, and the recommended approach for most implementations
• Pure CSS: 3 <span> elements or ::before and ::after pseudo-elements styled with height, width, and background-color
• Icon font: single character from Font Awesome (f0c9) or Bootstrap Icons rendered via CSS font-face

SVG inline wins on flexibility. It can be embedded directly in HTML, styled with CSS custom properties, and animated into an X shape on open state without any extra assets. Need to edit SVG files for your own icon? The path data for 3 horizontal rectangles is about 10 lines of markup.

The X Animation on Open

The most common hamburger animation transforms all 3 lines when the menu opens: the top line rotates 45 degrees, the middle line fades out, and the bottom line rotates negative 45 degrees.

The result is an X icon that signals “close.” Users familiar with the pattern know immediately how to dismiss the menu.

CSS technique used: transform: rotate(45deg) and translateY() on the top and bottom spans, plus opacity: 0 on the middle. The transition property smooths the movement. You can build this with a CSS animation generator or write the keyframes manually.

Size Standards

The visual icon renders at 16 to 24 pixels in most implementations. The clickable touch target must be padded to at least 44×44 pixels (Apple HIG, WCAG 2.5.5).

Skipping the padding is one of the most common hamburger menu mistakes. The icon looks fine on screen but fails for users with motor impairments who cannot reliably tap a 20px target.

Where Is the Hamburger Menu Used?

The hamburger menu appears across mobile web, native apps, CMS themes, and some desktop interfaces. Adoption rates vary by context, and so do the arguments for and against using it.

Nielsen Norman Group found that 84% of e-commerce sites use the hamburger menu button. A Baymard Institute analysis of 50 popular websites found that 96% used some form of hidden or collapsible navigation, with the hamburger menu being the most common choice.

Mobile Web and E-Commerce

The hamburger menu is essentially standard on mobile e-commerce. Shopify’s Dawn theme, WordPress’s Twenty Twenty-Four theme, and Squarespace’s default templates all collapse navigation behind a toggle on mobile breakpoints.

E-commerce accounts for 71.8% of its traffic from mobile devices (Contentsquare, 2024), making small-screen navigation a critical design decision for conversion.

Native Apps

Gmail (Android), Google Drive, and Uber use hamburger menus for secondary navigation: settings, labels, account switching, and utility links that do not need to be one tap away at all times.

The pattern in these apps is a hybrid. Core actions (compose, inbox, ride) stay on persistent tabs or home screen buttons. The hamburger menu holds the sidebar navigation for everything else.

Desktop Use Cases

On desktop, the hamburger menu mostly appears in 2 contexts: sidebar toggles for dashboards (Google Drive, YouTube Studio) and responsive sites that do not adapt their mobile layout at wider breakpoints.

The second case is usually a design debt issue rather than an intentional choice. Apple.com and Amazon mobile have moved away from hamburger-only navigation in favor of exposed links and bottom nav patterns, specifically because discoverability on their core actions was suffering.

Where It Has Been Removed

Facebook pioneered the hamburger menu in mobile apps around 2009. After internal engagement testing, they moved primary navigation to a bottom tab bar on both iOS and Android.

Common departures from the hamburger pattern:

• Instagram: bottom tab bar with 5 fixed destinations
• Spotify: moved to bottom nav after documenting the 30% engagement increase
• Amazon mobile: primary nav now accessible through a bottom bar; hamburger moved to secondary role

The trend is consistent. High-engagement consumer apps move their primary navigation out of the hamburger and into a persistent, always-visible pattern. The hamburger stays for secondary utilities and account settings.

FAQ on Hamburger Menus

Why is it called a hamburger menu?

The name comes from the icon’s appearance: 3 horizontal stacked lines that visually resemble a hamburger. Two outer lines act as the bun, the middle line as the patty. Norm Cox coined the design in 1981 for the Xerox Star interface.

Is a hamburger menu good for SEO?

The hamburger menu does not directly affect SEO rankings. Search engines crawl hidden navigation links regardless of visibility. However, reduced user engagement from hidden nav can lower behavioral signals that indirectly influence how pages perform in search results.

What is the difference between a hamburger menu and a navigation drawer?

A navigation drawer is the panel that slides in after tapping the hamburger button. The hamburger menu is the trigger icon. The drawer is the container. Most design systems, including Material Design 3, treat them as one connected component.

What size should a hamburger menu icon be?

The visual icon typically renders at 24px. The touch target must be padded to a minimum of 44×44 pixels, per Apple’s Human Interface Guidelines and WCAG 2.5.5. Smaller touch targets fail accessibility standards and cause tap errors on mobile.

Should I use a hamburger menu on desktop?

Generally, no. Nielsen Norman Group research shows hidden navigation causes a 20% drop in content discoverability on desktop. Visible navigation consistently outperforms the collapsed menu button on larger screens where horizontal space is available.

What HTML element should the hamburger button use?

Always use a <button> element. It handles keyboard focus, Enter and Space key presses, and screen reader announcements automatically. Using a <div> or <a> tag requires manually replicating all of that behavior with extra JavaScript and ARIA attributes.

What ARIA attributes does a hamburger menu need?

A compliant hamburger menu button requires aria-expanded, aria-controls, and aria-label. The aria-expanded value must toggle dynamically between true and false on each click to communicate the current open or closed state to screen reader users.

What is the best alternative to a hamburger menu?

A tab bar is the most effective alternative for mobile apps with 3 to 5 primary destinations. It keeps navigation permanently visible, requires one tap to reach any section, and consistently outperforms hidden navigation on engagement and task completion metrics.

Why do some sites still use a hamburger menu on desktop?

Usually it is design debt. A mobile layout gets carried forward to desktop without adaptation. Some dashboard and admin interfaces use it as a sidebar toggle, which is a legitimate desktop use case. Using it as the sole desktop navigation is a usability problem.

Does adding the word “Menu” next to the hamburger icon help?

Yes, measurably. One documented test found that relabeling the trigger from “Explore” to “Menu” increased menu engagement by 57%. The word removes ambiguity for users unfamiliar with the three-line icon, particularly those aged 45 and older.

Conclusion

This conclusion is for an article presenting what is a hamburger menu, a collapsed mobile navigation pattern that has shaped responsive web design for over a decade.

It works well when screen space is tight and navigation is complex. It fails when it becomes the default choice without considering discoverability, interaction cost, or web accessibility.

The nav toggle button is not going away. But the way it gets used is shifting. More teams are pairing it with visible tab bars, Priority+ patterns, and proper inclusive design practices.

Get the ARIA attributes right. Size the touch target correctly. And ask whether your users actually need the navigation hidden at all.