Website navigation: how many menu items is too many?

Five to seven items in the main menu. Beyond seven, labels get shorter and vaguer to fit, visitors scan instead of reading, and on a phone the open menu becomes a list to scroll. If more than seven things matter, the answer is grouping and a good footer, not a longer bar.

The number is a guide, not a law. What matters is whether a first-time visitor can predict what is behind each label. The rest of this post is about getting that right.

Why does the number of menu items matter?

Each item in a menu is a decision the visitor has to make. With five items, a visitor reads them all and picks. With twelve, they skim, pick something close enough, and go hunting through the page. Vague labels make this worse: "Solutions" and "Resources" tell nobody anything, and they appear most often on menus that ran out of room for clear words.

Mobile is the hard limit. On a phone, every item is a full-width row, and twelve rows with sub-menus means scrolling inside the menu before the visitor has seen a page. The desktop header can hide that problem; the phone cannot.

Search engines are a weaker reason than people think. Google reads your navigation as a set of links and uses it to find pages and understand which ones you consider important. Fifteen links in a header do not hurt crawling. They dilute the signal of which pages matter, and that is as far as it goes.

What belongs in the main menu?

Only the pages a new visitor came to find. For most company sites that is a short list.

That is six, and most sites can drop one. The test for any candidate: would a visitor who has never heard of you click it in the first thirty seconds? Careers, Partners, News, Downloads, Login and Privacy fail that test and belong in the footer.

Decide the menu when you decide the page list, not after the design is done. Our pillar guide on how to plan a company website covers this step, and when we take a site through design and development the menu is agreed in the sitemap stage, before any page is drawn.

What should go in the footer instead?

The footer is the second menu, and it can hold everything the header cannot. Visitors who reach it are looking for something specific, so a long, organised list serves them well. Put there:

• Every service page, in a column, so each one gets a link from every page.
• Secondary pages: Careers, Partners, Press, FAQ.
• Legal: Privacy, Terms, Refunds, Cookies.
• Contact details in text, not just a link: address, phone, email, hours.
• Social profiles.

A four-column footer with twenty links is normal and useful. It also gives every page on the site a link to your service pages, which helps those pages rank. The header is for the five things that matter most; the footer is the map.

Should you use dropdowns or a mega menu?

Dropdowns exist so a top-level label can hold a group. They are the right tool when you have more than one page in a category, for example six services under "Services". A mega menu is a large dropdown panel with columns, descriptions and sometimes images, and it is the right tool when the group is large enough to need its own structure, say twelve services in three groups.

Three rules for any dropdown. Open on click, not hover, so it works on touch screens and with a keyboard. Make the top-level label itself a link to an overview page, so a visitor who clicks "Services" gets a page rather than nothing. Keep the group names in the visitor's words, not your org chart; "Websites" and "Mobile apps", not "Digital solutions" and "Platform engineering".

A mega menu on a ten-page site is a sign that someone wanted to avoid choosing. Choose instead.

How should navigation work on a phone?

The hamburger icon is fine, and nearly everyone recognises it now, but label it "Menu" anyway. It costs nothing and removes doubt.

• Keep the header short: logo, Menu, and one action, usually a phone or WhatsApp button.
• Make every tap target at least 24 by 24 CSS pixels, which is the minimum in WCAG 2.2, and larger where there is room. Menu rows should be full width and at least 44 pixels tall.
• Show sub-items as expandable rows, not as a second screen. Two levels is the limit; a third level means the structure needs rethinking.
• Put Contact at the top of the open menu as well as the bottom of the page. On mobile the footer is a long way down.
• Test with one thumb on a real phone, not with the browser window narrowed.

The accessibility basics post covers the keyboard and screen reader side of menus, which the same markup handles if it is built correctly.

What do search engines need from the menu?

Google follows links it can parse from the HTML. Its documentation on crawlable links is specific: a link is an a element with an href pointing at a real URL. Menus built from JavaScript click handlers, buttons, or href="#" with a script behind them can hide your whole site structure from the crawler.

Beyond that:

• Keep the menu identical on every page. A menu that changes by section makes it harder for both visitors and crawlers to build a model of the site.
• Use descriptive labels. "Web design services" tells Google what the page is; "Learn more" does not.
• Add breadcrumbs on any site deeper than two levels. They show the path and give a second set of internal links, and with BreadcrumbList markup they can appear in search results in place of the URL.
• Do not put every page in the header to "pass link equity". A smaller, clearer header plus a full footer gives the same coverage with a better signal.

How do you test a menu before launch?

Give three people who do not work for you a task: "find out what it costs to get a website built" or "find the phone number". Watch where they click first. If two of three click the wrong item, rename or move it. This takes twenty minutes and finds more than any amount of internal debate.

Then count clicks. Every page a visitor is likely to want should be reachable in two clicks from the homepage; three is the limit. Pages beyond three clicks are rarely found by visitors and are crawled less often.

Finally, look at the labels again after the copy is written. Page names change during a project, and the menu is the last place anyone checks. Add it to your launch checklist so it is read once more, on a phone, before the site goes live.