Planning Website Navigation and Menus

Start with the structure, not the menu

A menu shows the structure of a site: which pages exist and how they are grouped. Work it out before anyone designs a menu, usually as a simple sitemap listing every page under its section. Our website content checklist covers gathering the pages themselves.

For a typical service business, the structure is shallow: a home page, one page per service, a few pages about the business, proof such as case studies, and contact. Nielsen Norman Group (NN/g) points out in its menu design checklist (2024) that navigation does more than help people move around: it "helps users to understand the scope of your resources or content".

NN/g's checklist also lists where people expect each kind of menu: the main navigation in the header, smaller utility links above it, local navigation for a section down the left side on desktop, and a footer menu at the bottom.

Labels people recognise

NN/g's advice on wording is direct: use "clear, specific, and familiar wording" for menu labels, and "menus are not the place to get cute with made-up words, internal jargon, or abstract high-level categorization". "Services" and "Contact" beat "Solutions" or a name only your team knows.

Two more of its recommendations make menus quicker to scan. Left-align vertical menus and "front-load key terms", so the word that matters comes first. The words customers type into your site search or Google are a good source of labels; our guides to site search and website copywriting cover how to find them.

Menus on larger screens

On desktop, NN/g's recommendation is to show the menu. Its quantitative study on hidden navigation (2016), with 179 participants on six websites, found that hiding the main menu behind an icon such as the "hamburger" made people less likely to use navigation, made tasks take longer and feel harder, and lowered content discoverability by more than 20%. The effect was larger on desktop. Its advice: "Do not use hidden navigation (such as hamburger icons) in desktop user interfaces."

The menu design checklist adds:

• Show where people are. Highlight the current section. NN/g calls failing to do so "probably the single most common mistake we see on website menus".
• Make links easy to read and hit: enough contrast with the background, and targets that are not too small or too close together.
• Avoid gimmicks. NN/g advises against "innovative or gimmicky patterns for navigation".

Menus on phones

Phones have little space, so the trade-off is different. NN/g's article on mobile navigation patterns (2015) describes the balance: navigation must be "discoverable, accessible, and take little screen space", while content still comes first. Its hidden-navigation study gives a rule of thumb for phones:

• with four or fewer top-level links, show them as visible links;
• with more than four, hiding some of them in a menu is "the only reasonable solution", because an expandable menu works far better than the alternatives.

When the menu is hidden, support it. NN/g suggests in-page links to important information: for example, links from the home page to each service and a contact button in the header. "Mobile-first is not the same as mobile-only": design the desktop menu for desktop rather than shrinking the phone version.

Dropdowns and submenus

Many business sites group services under a dropdown. NN/g's checklist gives several rules:

• Mark items that open a submenu with a caret or arrow, so people can tell them apart from plain links.
• Open submenus on click or tap, not hover. Hover is not available on touchscreens or to keyboard users, and menus that open and close by accident frustrate everyone.
• Avoid cascading menus more than one level deep. For deeper structures, use a mega menu, which can show two or three tiers, or a section landing page that lists the options.
• Do not cover the whole screen with an open menu on large screens, or people may think they have gone to a new page.

On a small site, a "Services" page that introduces each service gives the dropdown somewhere to point, and gives visitors who skip it somewhere useful to land.

Breadcrumbs

A breadcrumb trail is a line of links near the top of a page showing where it sits, such as Home > Guides > Planning website navigation. NN/g's breadcrumb guidelines (2026) say they help people who arrive deep in a site from a search result, and set out how to use them:

• They support the main menu; they do not replace it.
• They show the page's place in the site's hierarchy, "not the session history".
• The last item, the current page, is not a link, and every other item links to a real page.
• They "aren't necessary (or useful)" on sites only one or two levels deep.
• On phones, avoid trails that wrap onto several lines or links that are too small; showing only the parent page is a reasonable compromise.

Breadcrumbs can also be described to search engines with structured data. Google's documentation on breadcrumb (BreadcrumbList) structured data says the markup is a BreadcrumbList with a ListItem for each step, in order, each with a position, a name and the page's URL. Google recommends breadcrumbs that "represent a typical user path to a page, instead of mirroring the URL structure", and notes the feature is available on desktop. Our structured data guide covers testing it.

Menus everyone can use

WCAG 2.2, the W3C accessibility standard, has two rules aimed at navigation:

• Consistent navigation (success criterion 3.2.3, Level AA): navigation repeated on several pages must "occur in the same relative order each time".
• Bypass blocks (success criterion 2.4.1, Level A): a way to skip content repeated on every page, such as the menu, usually a "Skip to main content" link that appears when someone presses Tab.

For dropdowns, the W3C's ARIA Authoring Practices include a disclosure navigation menu example. Each dropdown is opened by a button that says whether it is open, with aria-expanded, and the link to the current page carries aria-current="page". The example deliberately does not use the ARIA "menu" role, because "typical site navigation does not need all the keyboard interactions specified by the menu and menubar pattern". A menu role tells assistive technologies to expect that more complex behaviour, which ordinary site navigation does not provide. Our accessibility basics guide covers keyboard testing.

Testing the structure

You can test a structure before anything is designed. NN/g describes two methods:

• Card sorting: participants sort cards naming your pages into groups that make sense to them. It shows how customers expect things to be grouped and named.
• Tree testing: participants get the menu structure as plain text, with no design, and tasks such as "find out whether they work in your area". It shows whether people can find things in your structure.

Even a small test with a few people who match your customers can show confusing labels. After launch, analytics and site search show where people go and what they cannot find. If you are restructuring an existing site, see our guide to redesigning without losing search traffic before changing any URLs.

A checklist

• A sitemap lists every page under its section before the menu is designed.
• Labels use your customers' words, with the key word first.
• The full menu is visible on desktop, and the current section is highlighted.
• On phones, key pages are reachable through in-page links as well as the menu.
• Dropdowns open on click or tap, are marked with an arrow and are one level deep.
• Breadcrumbs, if the site is deep enough, follow the hierarchy, with matching BreadcrumbList markup.
• The menu is the same on every page, with a skip link, and works by keyboard.
• The structure has been tried by people outside the business.

Frequently asked questions

Should my website use a hamburger menu?

On desktop, no. Nielsen Norman Group found that hiding the main navigation made people use it less and find less content, and recommends showing the menu on larger screens. On phones, a hidden menu is reasonable when you have more than four top-level links, backed up by in-page links to key pages.

How many items should a website menu have?

There is no fixed number. Show your main sections in words customers recognise. On phones, Nielsen Norman Group suggests showing up to four top-level links directly and putting the rest in an expandable menu.

Should dropdown menus open on hover?

Nielsen Norman Group recommends opening submenus on click or tap instead, because hover does not work on touchscreens or for keyboard users. Mark items that open a submenu with an arrow, and keep dropdowns to one level.

Does a small website need breadcrumbs?

Usually not if the site is only one or two levels deep; highlighting the current section in the menu is enough. Breadcrumbs help on deeper sites, such as those with sections, guides or product categories.

Do breadcrumbs help SEO?

Google supports BreadcrumbList structured data, which describes a page's position in the site, and can show breadcrumbs in desktop search results. Google recommends that breadcrumbs reflect a typical user path rather than the URL structure.

Planning a new website? Our projects start with a plan: a sitemap and the key page layouts, then the main pages designed in your brand and reviewed on phone and desktop. See our website development service and all our services, or email [email protected].