A hamburger menu is a navigation control shown as an icon of three horizontal lines that, when tapped, reveals a hidden menu of links, usually as a sliding panel, a dropdown or a full-screen overlay. On the mobile web, it is the most common way to fit a site’s primary navigation into a narrow viewport, and it is closely related to the navigation drawer used in native apps.
The pattern trades visibility for space. It keeps the screen clean for content, but hidden navigation is used less often than visible navigation, so designers must decide carefully which links deserve a place on screen and which can live behind the icon.
How a hamburger menu works on the mobile web
A hamburger menu has two parts: a toggle button, typically placed in the top corner of the header, and a menu container that is hidden by default. Tapping the button changes the container’s visibility with CSS and, in most implementations, a small amount of JavaScript, often accompanied by an animation of the icon into a close symbol.
In responsive design, the same navigation markup is usually displayed as a horizontal bar on wide screens and collapsed behind the hamburger icon below a breakpoint, commonly somewhere between about 768 and 1024 CSS pixels. Under a mobile-first design approach, the collapsed version is the default and the expanded bar is added with media queries.
The table below shows the common ways the hidden menu is presented after the tap.
| Style | Behavior | Best suited for |
|---|---|---|
| Off-canvas drawer | Panel slides in from the side, page dims | Sites with many sections and nested links |
| Dropdown panel | Menu expands below the header and pushes or covers content | Short menus of five to eight links |
| Full-screen overlay | Menu covers the whole viewport | Brand-focused sites, large touch targets |
| Accordion inside the menu | Submenus expand in place | Deep hierarchies such as shops and documentation |
Accessibility and implementation details
The toggle must be a real button element, not a styled link or a bare icon, so that it works with keyboards and screen readers. It needs an accessible name such as Menu and an aria-expanded state that switches between true and false when the menu opens and closes.
| Requirement | Why it matters | How to meet it |
|---|---|---|
| Accessible name | The icon alone carries no text | Visible label or aria-label such as Menu |
| Expanded state | Screen reader users need to know the menu is open | Toggle aria-expanded on the button |
| Focus management | Keyboard users must reach the links | Move focus into the menu, return it on close |
| Escape to close | Expected dialog behavior | Listen for the Escape key |
| Adequate touch target | Small icons cause mistaps | At least about 44 by 44 CSS pixels |
| Scroll locking | Background page should not scroll behind an overlay | Prevent body scroll while open |
Developers should also handle dynamic viewport units and safe areas, because an overlay sized with older viewport units can be cut off by a mobile browser toolbar that appears or disappears during scrolling.
Hamburger menu compared with other navigation patterns
The hamburger menu competes with patterns that keep navigation visible. Research in usability practice has repeatedly found that hidden navigation is discovered and used less, especially by less experienced users, which is why many designers now combine patterns instead of hiding everything.
| Pattern | Visibility | Capacity | Typical use |
|---|---|---|---|
| Hamburger menu | Hidden until tapped | High, many links | Content-heavy websites |
| Bottom navigation bar | Always visible | Three to five items | Web apps and progressive web apps |
| Tab bar or priority+ menu | Most important links visible, rest under More | Medium | News and editorial sites |
| Visible link list in header | Always visible | Two to four short links | Small sites, landing pages |
A frequent compromise is a priority+ pattern: the two to four most important destinations stay visible in the header or a bottom bar, and the hamburger icon holds secondary links. This keeps key tasks one tap away while preserving space.
When to use a hamburger menu
A hamburger menu is a sound choice when a site has many destinations of similar importance and users arrive mainly through search or direct links rather than by browsing the menu. It is a weaker choice when a few actions drive most of the value, such as search, cart or account.
| Situation | Recommended approach | Reason |
|---|---|---|
| Fewer than five main sections | Visible links or bottom bar | Everything fits without hiding |
| Online store with cart and search | Visible search and cart, hamburger for categories | Key tasks stay one tap away |
| Large documentation or news site | Hamburger with accordion submenus | Deep hierarchy needs space |
| Installed progressive web app | Bottom navigation | App-like expectations and thumb reach |
Common mistakes with hamburger menus
The most damaging mistake is hiding the primary task, for example placing search or checkout behind the icon. Another is using the hamburger on desktop layouts with ample space, which adds a click without any benefit.
- Icon without a label on audiences unfamiliar with the symbol; adding the word Menu improves recognition.
- Menus that cannot be closed easily, missing a close button or Escape support.
- Heavy animation that delays access and ignores reduced-motion preferences.
- Placement in the top corner only, which is hard to reach one-handed on large phones.
Measuring how often the menu is opened, and which links inside it are used, gives an objective basis for promoting popular items to visible positions over time.
Put simply
A hamburger menu is the small icon with three lines in the corner of many websites on a phone. Tapping it opens a list of the site’s pages, and tapping again closes it. The name comes from the icon’s resemblance to a burger between two buns.
It exists because phone screens are narrow and a full menu would push the content away. The downside is that people do not always notice what is hidden, so the most important links should stay visible.
In practice
A regional public library redesigns its website after analytics show that most visits come from phones. The old mobile site hid everything, including catalog search and opening hours, behind a hamburger menu, and visitors often called the front desk for information already on the site.
The new design keeps catalog search and opening hours visible in the header, adds a bottom bar for My account, while the hamburger menu holds the remaining sections in accordion groups. The toggle gets a visible Menu label, proper button semantics and keyboard support.
After launch, catalog searches from mobile devices rise, phone calls about opening hours fall and accessibility testing passes with screen readers on both major mobile platforms.