What is a hamburger menu — and what hiding your navigation actually costs

Three lines in the corner of the screen feel like a free solution. The menu stays out of the way, the header is clean, everything fits.

Someone did the math. Nielsen Norman Group ran a study: 179 people, six websites, phones and computers. On desktop, the hidden menu got used in 27% of cases. The visible one — in 48%. Nearly twice as often.

The study is ten years old, and it reads like a verdict on the icon. But look closer: on phones it's not that clear-cut.

What it is

A hamburger menu is a button with an icon of three horizontal lines (it looks like a bun with a patty, hence the name). Tap it and a list of the site's sections slides out.

The idea is simple: hide the navigation to free up space. On a phone, width is the scarcest resource, and five to seven menu items won't fit in the header.

The problem is that a hidden menu behaves like anything hidden. To use it, people first have to realise it's there.

What the study found

NN/g compared three setups: navigation fully visible, hidden behind an icon, and combo — some items visible, the rest under "More". The numbers from the 2016 report:

• Desktop. The hidden menu was used in 27% of cases, visible in 48%, combo in 50%. Tasks with a hidden menu took at least 39% longer.
• Phone. People opened the hidden menu in 57% of cases and used combo in 86% — one and a half times more. Tasks took 15% longer than with combo.
• Perceived difficulty. With hidden navigation, people rated tasks 21% harder than with visible navigation.

The bottom line, right in the report's summary: hiding the main navigation cuts discoverability almost in half.

A curious detail: people used the menu more readily on phones than on computers. Habit seems to play a part: the researchers write that on phones the pattern was starting to settle, while on desktop there's no consistent standard. That's also where the penalty is bigger.

Why the hidden menu loses

The researchers give three reasons:

• It's hard to see. A small icon gets lost on a big screen. A visible menu takes up more space — so people simply notice it.
• There's no standard. Some sites hide the menu, some don't. The icon sits on the left or on the right, labelled differently. No habit forms.
• Not everyone knows the icon. Three lines are obvious to heavy phone users. Others don't guess it's a button.

Add search to that: on desktop it's more prominent. Can't find the menu — people search or leave.

When a hamburger is the right call

NN/g's conclusion isn't "never" — it's both stricter and more precise:

1. On desktop, don't hide it. There's room, and the penalty is the largest.
2. On phones with 4–5 sections, show them openly. A tab row at the bottom or top of the screen will do.
3. On phones with more sections, hiding is reasonable. There's a penalty, but the alternatives are worse.
4. The best compromise is combo. Three or four key sections visible, the rest under "More". In the study, combo had the best numbers on phones.
5. Make the button noticeable. On the two best sites in the study, the menu opened from a big button with a word on it — "Browse" on one, "Menu" on the other — not a lone icon. Making the menu sticky, so it doesn't scroll away, helps too.

If the site structure is deep, give people one more anchor — breadcrumbs. They show where you are even when the menu is closed. And if what you want to hide isn't site sections but blocks within a page, that's the question of tabs or an accordion.

How to build a hamburger that works

The most common mistake in generated code: the icon is an image or a div with a click handler. You can't reach it with a keyboard, and a screen reader won't know it's a button.

The W3C ARIA guide describes this as the "disclosure" pattern: a real button whose aria-expanded flips between true and false. It opens with Enter and Space.

<button aria-expanded="false" aria-controls="site-menu">
  <span aria-hidden="true">☰</span> Menu
</button>
<ul id="site-menu" hidden>
  <li><a href="/catalog/">Catalog</a></li>
  <li><a href="/delivery/">Delivery</a></li>
</ul>

On click, a script toggles aria-expanded and the hidden attribute on the list. The word "Menu" next to the icon isn't decoration: it's both the label for the screen reader and a hint for people who don't recognise the icon.

Check how your site looks on a phone: can you reach the menu with a single Tab, and is it obvious that it's open?

Is a hamburger menu on desktop a mistake?

According to NN/g, yes — if it's the main navigation. There's room on desktop, yet hidden menus get used almost half as often and tasks take longer.

How many items can I show without a hamburger?

NN/g points to 4–5 top-level sections: that's usually how many fit openly even on a phone. If you have more, keep the key ones visible and move the rest under "More".

What if I have many sections but don't want to hide them?

Repeat the navigation at the bottom of the page. In the same study, one of the best sites duplicated its menu at the end of the page — and people who scrolled to the bottom used it without going back up. Most people scroll on phones, so the bottom block works as a second door.

Do I need a "Menu" label next to the icon?

Yes — it's cheap and useful. The word makes the button more noticeable and clearer for people who don't know the three lines, and gives the screen reader a proper button name.