Short answer: A hamburger menu is the button, often three stacked lines, that hides a site’s navigation until someone taps it. Use it on phones when you have more than four main sections, not on desktop. Give it a visible label, and keep its links in the HTML so Google can crawl them.
What a hamburger menu is
It’s a menu button, usually drawn as three horizontal lines, that opens the site’s navigation on demand. Nielsen Norman Group calls this hidden navigation, as opposed to visible navigation, where the links show on the page, and combo navigation, which shows some and hides the rest.
In 2016, NN/g tested navigation with 179 participants on six sites. On desktop, people used hidden menus in 27% of cases, against 48% with visible navigation and 50% with combo navigation.
With hidden navigation, content discoverability dropped more than 20%, on desktop and on phones. Tasks also took longer: on desktop people were at least 39% slower, and on phones 15% slower than with combo navigation.
When to use one
On desktop, NN/g advises against it: show the main sections across the top of the page or down the left side. On phones there is no hard rule. With four or fewer main sections, show them as links; with more than four, hiding some is the reasonable choice.
On phones, hiding the navigation costs less than on desktop, and NN/g recommends accepting that trade-off. Even then, link to your important pages from the page itself, so nobody has to open the menu to find them.
What each part of the menu needs
| Part | What to do | Why |
|---|---|---|
| Desktop navigation | Show the main sections in the header, with no menu button | Hidden menus were used in 27% of cases; visible ones, in 48% |
| Phone, up to 4 sections | Show them as links | NN/g’s rule of thumb for phones |
| Phone, more than 4 sections | Hide some or all of them under one menu button | Hiding costs less on phones than on desktop |
| The button | A visible word such as Menu, at least 24 by 24 CSS pixels | Not everyone knows the icon; WCAG 2.2 AA sets 24 by 24 |
| The links | Real links in the HTML before the tap | Google crawls links in the HTML and won’t tap to load content |
From Nielsen Norman Group’s hidden navigation study, the W3C’s target size criterion and Google Search Central, read November 3, 2026.
How to build a hamburger menu people find
- Count your main sections. With four or fewer, show them on phones instead of hiding them.
- On desktop, show the main sections in the header and keep the menu button for small screens.
- Use a real button with a visible word, such as Menu, not only three lines.
- Make the button at least 24 by 24 CSS pixels and keep it clearly apart from the logo.
- Set aria-expanded to false when the menu is closed and to true when it is open, and point aria-controls at the menu.
- Let the Escape key close the menu and put the focus back on the button.
- Keep every menu link in the HTML as a real link, so Google finds it without tapping.
Our mobile-first indexing guide covers how to check the phone version Google reads, and our internal links guide covers how to use links between your pages for SEO. Our website footer guide covers the navigation at the bottom of the page.
How our own menu works
We checked our own menu on November 3, 2026, as a visitor on one of our guides. On a 1,440-pixel screen there is no menu button: the header shows Services, Work, The Loop and Our story, plus a Book a call button.
On a 390-pixel phone, our button isn’t three lines: it shows the word Menu and measures 87 by 44 pixels. A tap sets aria-expanded to true and opens 13 links, and Escape closes the menu and returns the focus to the button.
The 13 links are already in the HTML our server sends, before any tap. The page doesn’t use the ARIA menu role, which the W3C’s navigation example also leaves out.
Before you ship your menu
- Desktop shows the main sections without a tap.
- Phones show the sections as links if there are four or fewer.
- The menu button has a visible word, not only an icon.
- The button is at least 24 by 24 CSS pixels.
- aria-expanded changes when the menu opens and closes, and Escape closes it.
- Every menu link is in the HTML before the tap.
RememberShow your navigation on desktop. On phones, hide it only when you have more than four sections, and label the button.
If you want navigation your visitors find on any screen, see our web design service.
Quick answers about hamburger menus
What is a hamburger menu?
It’s a button, usually three stacked lines, that hides a site’s navigation until someone taps or clicks it. Nielsen Norman Group calls this hidden navigation. It saves room on small screens, but people find content less often when the main navigation is hidden.
Are hamburger menus bad for usability?
They have a cost. In NN/g’s 2016 study of 179 participants, content discoverability dropped more than 20% with hidden navigation, and tasks took longer and felt harder. The cost was smaller on phones, so a menu is a fair trade there when you have more than four sections.
Should I use a hamburger menu on desktop?
NN/g advises against it. On desktop, people used hidden menus in 27% of cases, against 48% with visible navigation and 50% with combo navigation. Desktop screens have room for the main sections, so show them across the top or down the left side.
Can Google crawl links in a hamburger menu?
Yes, if they are real links in the HTML. Google crawls links written as an a element with an href attribute, including links JavaScript adds with that markup. Google won’t click or tap to load content, so links that only load after a tap can be missed.
What should the menu button say?
A visible word such as Menu helps. NN/g found the hamburger icon is not so universal that everyone knows it, and recommends a legible, high-contrast label. Set aria-expanded on the button too, so assistive technology knows whether the menu is open.
Sources
Read on November 3, 2026. Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt UX Metrics and How to Make Navigation (Even a Hamburger) Discoverable on Mobile. W3C Web Accessibility Initiative: Example Disclosure Navigation Menu and Understanding SC 2.5.8 Target Size (Minimum). Google Search Central: Link best practices for Google and Mobile site and mobile-first indexing best practices. Our own case: the menu of one of our guides at 390 and 1,440 pixels, on November 3, 2026.