A good website menu has a few top-level items, each named with the plain words a visitor would use, and it stays visible. The strongest evidence isn't about how many items you list. It's about whether people can see the menu at all: in a Nielsen Norman Group study of 179 participants, desktop visitors used visible navigation in 48% of cases and navigation hidden behind an icon in only 27%.
Menu design is part of UX and UI design, and it's the part most small business sites get wrong in the same two ways: too many items with vague names, and a hamburger icon on a screen with room for the real thing. onlyspell works on this kind of problem, but the rules below apply to any site.
Should a website menu be hidden behind a hamburger icon?
No, not if you have room to show it. Nielsen Norman Group tested six live sites with 179 participants. Hidden navigation was used in 27% of desktop cases against 48% for visible and 50% for a combination of both, and desktop tasks took at least 39% longer when the menu was hidden.
Phones are different, because there's little space. Even there, the numbers favour showing something. Mobile participants used a combination menu in 86% of cases and a fully hidden one in 57%, and tasks with the hidden menu took 15% longer. The two best mobile sites in the follow-up article combined visible links with a menu button, placed prominently at the top of the page.
The same follow-up explains why a hidden menu sometimes does fine and sometimes doesn't. The weakest site had its icon sitting beside the logo, small and low in contrast, so it looked like part of the banner. The hidden-only sites used small hamburger or "Menu" buttons with a small footprint. So the practical rule is this: on a phone, show your two or three most important destinations or a main action, and put the rest behind a button that is large, high in contrast and labelled with the word "Menu". On a desktop, show everything in the top level.
How many items should a website menu have?
Five to seven top-level items is the usual advice, and it works as a rule of thumb for a business site. None of the sources opened for this article sets a limit, though. Start from the jobs visitors come to do, then give each job one item. If you end up with nine, merge or demote some.
Write down the five things a first-time visitor wants from your site. For a clinic that might be what you treat, who the doctors are, prices, location and how to book. Each one gets a menu item, and "About us" only earns a place if visitors really ask who you are before they buy. The menu isn't your org chart, and it isn't a table of contents for everything you've published. Pages that matter to you but not to a first visit belong in the footer.
Keep the depth shallow too. A dropdown inside a dropdown is hard to hit with a mouse and almost impossible on touch. If a section needs a second level, make the top item a real page that lists its children, so nobody has to open the submenu to find out what's inside.
What should the menu labels say?
Use the words your visitors use for the thing, in the shortest form that is still specific. "Pricing" beats "Investment". "Book a visit" beats "Get started". Vague umbrella labels such as "Solutions" or "Resources" force a click just to learn what's behind them.
Two habits make labels better. Keep them parallel: if the menu is nouns, don't slip in one verb. And put the information-carrying word first, so someone scanning the left edge of a dropdown gets the point without reading to the end.
Then test it cheaply. Show a friend who has never seen the site just the menu, with no page behind it, and ask where they'd click to find your prices, to contact you and to see past work. Every hesitation points to a label to rename. It takes ten minutes and no software.
Which menu details affect accessibility?
Four details do most of the work: keep the menu in the same order on every page, mark the current page without relying on colour alone, make it usable with a keyboard, and give menu targets a comfortable size. The W3C's menu tutorial and WCAG cover each of them.
- Same order everywhere. WCAG 2.2 success criterion 3.2.3, at level AA, requires navigation repeated across pages to appear in the same relative order each time. Predictable placement helps people using screen magnifiers, people who rely on spatial memory and screen reader users.
- Show where you are. The W3C advises clear, distinct states, especially for the current page, and says not to rely on colour alone: add text or another visual cue, and keep a 3:1 contrast ratio with the surrounding text. Our guide to colour contrast ratios under WCAG shows how to check it.
- Keyboard and focus. Every menu, including fly-out submenus, must work without a mouse, with a logical focus order and a visible focus indicator. Submenus shouldn't snap shut the moment the pointer leaves the trigger.
- Target size. Menu links on a phone need room for a thumb. The tap target size guide covers the numbers.
Wrap the menu in a navigation landmark with an accessible label, so a screen reader user can jump straight to it or skip past it. The W3C also asks for a way to bypass blocks that repeat on every page, which in practice means a "skip to content" link.
A short checklist before you ship a menu
Count the top-level items and cut to the visitor's real jobs. Rename anything vague. On desktop, show the whole top level. On a phone, show the key one or two destinations next to a big, labelled Menu button. Mark the current page with more than colour. Tab through it with the keyboard once. If you want a second pair of eyes on yours, talk to us about your project.
Frequently asked questions
How many items should a website menu have?
Five to seven top-level items is the common guideline for a business site. It's a rule of thumb, not a tested limit. Pick one item per job a first-time visitor wants done, and move everything else into submenus with a real parent page or into the footer.
Is a hamburger menu bad for usability?
It can be. In Nielsen Norman Group's study of 179 participants, hiding navigation reduced usage on desktop from 48% to 27% and made tasks at least 39% slower. On phones the gap was smaller, and sites that paired visible links with a menu button did best.
Should the menu be the same on every page?
Yes. WCAG 2.2 success criterion 3.2.3 (level AA) requires navigation that repeats across pages to appear in the same relative order each time. Consistent placement also helps every visitor build a habit of where to look.
Sources
If you still need additional help in developing and designing your website, our magic is here to help. Contact us today, and our wizards will help you immediately with your digital marketing needs!
