Most website menus aren’t designed. They accumulate. A new service gets its own item, someone wants the brochure linked, and “Resources” becomes the drawer for everything else. A few years on, the top bar holds nine items and visitors can’t tell three of them apart. That is what website navigation design looks like when nobody owns it.
Good navigation works from the other end, starting with what visitors come to do. A beautifully styled menu with the wrong structure still sends people to the wrong page.
This guide covers structure and labels. For keyboard and screen-reader behaviour, see accessible website navigation; for the search-engine side, see internal linking and site structure.
The short answer
To design navigation people understand, make five decisions in this order:
- Inventory your content: every page you have, and the ones you will need.
- Group pages by what visitors come to do, not by how your organisation is structured.
- Name each group in your customers’ words, not internal jargon.
- Test the structure with a card sort and a tree test before anything is designed.
- Choose the menu pattern that suits the number of items and the screen, then add a footer, breadcrumbs and search where needed.
Website navigation design starts with information architecture
Information architecture is how a website’s content is organised, grouped and labelled; navigation is its visible layer. That makes navigation a UX decision before a UI one: what goes where, and what it is called, comes before how the menu looks (see UX vs UI design for the difference). It is also where strategy, content, design and SEO meet, which is why clear navigation is one of the ingredients of what makes a good website.
Many visitors never see the homepage: they land on a service page or an article from search. Wherever they arrive, the navigation should tell them where they are, what else is here and where to go next. When it can’t, the cause is usually structural: two items nobody can tell apart (“Solutions” and “Services”), a catch-all called “More”, or key pages reachable only from a homepage banner.
Step 1: take a content inventory
You can’t organise what you haven’t listed. Export every page from your CMS, XML sitemap or a crawler into a spreadsheet, and add three columns:
| Column | What to record | Why it matters |
|---|---|---|
| Purpose | The visitor question the page answers | Exposes duplicates and pages with no job |
| Traffic | Views over the last 12 months, and whether visitors land there from search | Pages people use and pages that rank must stay easy to reach |
| Decision | Keep, merge, rewrite or remove | Stops dead pages shaping the menu |
For a new site, include content that will grow, such as projects or articles: a menu that works for eight pages can break at forty.
Find the top tasks
Then list the handful of things most visitors come to do. Search Console queries show the words people use to find you, your sales team knows the questions that come up every week, and enquiry messages show what people still had to ask after reading the site. These top tasks shape the top level of the menu; everything else fits underneath.
Step 2: group pages by what visitors come to do
A common structural mistake is a menu that mirrors the organisation chart, which makes sense to the people who work there and almost nobody else. Here is how that looks for a typical manufacturer:
| A buyer wants to… | Organised by the business | Organised by visitor tasks |
|---|---|---|
| See what you make | Plastics Division, Metals Division | Products |
| Check you serve their sector | Nowhere obvious | Industries we supply |
| Verify your standards | Corporate, then Quality policy | Quality and certifications |
| Get a price | Export Department | A “Request a quote” button |
Pick one organising principle for the top level
Group the top level by offering (services, products, treatments), by task (buy, book, get support) or by audience (patients and referring doctors), though audience menus only work when visitors recognise their group instantly. Mixing principles, such as “Services”, “For investors” and “Book now” side by side, forces visitors to guess how you think. The primary action works better as a header button than as another menu item.
The same thinking shaped a property developer’s website redesign: the structure was rebuilt around the questions buyers ask, with a page for every project, floor plans and transparent pricing.
Breadth, depth and the “seven items” myth
The rule that a menu should hold seven items, plus or minus two, is borrowed from psychologist George Miller’s 1956 paper on the limits of short-term memory. It doesn’t transfer well to menus: visitors scan a menu, they don’t memorise it. The real limits are practical:
- Distinctness. Every label must be clearly different from its neighbours.
- Space. The top level should fit on one line on a laptop in every language the site uses, and translated labels are often longer.
- Depth. Broad and shallow usually beats narrow and deep. Two levels is plenty for most business sites.
Step 3: write navigation labels in your customers’ words
A good label tells visitors what they will find before they click, which usability specialists call information scent. A vague one makes them click, check and come back.
- Use the words customers use. If enquiries ask about “factory construction”, don’t call it “industrial solutions”.
- Be specific, not clever. “Pricing” beats “Investment”. “Case studies” and “Guides” beat “Resources”.
- Front-load the useful word. “Office cleaning” and “Factory cleaning” scan faster than “Cleaning for offices” and “Cleaning for factories”.
- Make labels mutually exclusive. If a page could plausibly live under two items, rename one or merge them.
- Match the destination. The heading of the page a label leads to should echo the label.
- Write each language properly. Translate the meaning, not the words, and have a native speaker review every menu.
Step 4: test the structure with card sorting and tree testing
Two inexpensive methods show whether your structure matches how visitors think. Online tools help, but index cards and a spreadsheet work too.
Card sorting: how do people group your content?
Write each page or topic on a card, then ask people from your real audience (customers and prospects, not staff) to sort them into groups that make sense to them.
- Open card sort. Participants create and name their own groups. Use it early, to learn how people think and which words they use.
- Closed card sort. Participants place cards into your groups. Use it to check a proposed structure.
Look for cards almost everyone groups together, cards that end up everywhere (they need a clearer name) and the names participants give their groups, which make ready-made labels.
Tree testing: can people find things in your structure?
A tree test shows only the menu hierarchy as plain text. Participants get realistic tasks, such as “Where would you check whether they deliver overseas?”, and you record where they go.
- Write tasks in everyday language that doesn’t repeat the label being tested.
- Watch the first click. If people start down the wrong branch, the top-level labels need work.
- Compare versions. Run the same tasks on the current and proposed structures, so improvement is measured, not assumed.
On a live site, a website UX audit shows where the current navigation already fails.
Step 5: choose the right menu pattern
Only now does the visual pattern matter.
| Pattern | Works best for | Watch out for |
|---|---|---|
| Top navigation bar | Sites with a handful of top-level sections | Running out of room as items are added |
| Dropdown menu | A short list of related pages under one item | Opening only on hover; nested flyouts |
| Mega menu | Large sites with many sections, ranges or locations | Walls of links with no grouping |
| Menu button (hamburger) | Phones and narrow screens | Hiding the whole menu on desktop too |
| Local or sidebar navigation | Deep sections such as product categories | Repeating the main menu instead of the section |
Dropdowns and mega menus
When a second level grows to dozens of pages across several groups, a mega menu shows the whole section at once. Give each column a heading and keep promotions to a minimum: it should be an organised overview, not a sitemap.
Decide what a parent item does. If “Services” opens a dropdown, make it open on click or tap and put an “All services” link inside, so it behaves the same on every device.
Hamburger menus, and why not to hide desktop navigation
On a phone, a menu button is usually right. Add the word “Menu” beside the icon if you can, keep the desktop order, and use expandable sections rather than flyouts for the second level. More on small screens in mobile-first vs responsive design.
Desktop is different. In a 2016 Nielsen Norman Group study of hidden navigation, people used a hidden menu less often than a visible one, found content harder to discover and took longer on tasks, especially on desktop. There, hiding the menu behind an icon saves space you almost certainly have and costs discoverability you need.
The supporting navigation: footer, breadcrumbs, search and languages
Footer. Visitors look here for contact details, privacy information and careers. Group links under short headings and repeat your key services; it is a safety net, not a second sitemap.
Breadcrumb navigation. Breadcrumbs (Home › Services › Office cleaning) earn their place on sites with more than two levels. Place them above the page heading, follow the site’s hierarchy rather than the visitor’s route, and end with the current page, marked as the page you’re on. Add BreadcrumbList markup as Google’s breadcrumb structured data documentation describes.
Site search. Essential on a large catalogue or article library; on a fifteen-page site, fixing the menu is the better investment. If you add search, read the search terms: each search for something already in the menu points to a label that isn’t working. GA4’s enhanced measurement logs them when the term appears in the URL, as WordPress’s ?s= does.
Language switcher. Keep it in the same place on every page, usually the top right of the header, and reachable on phones without opening the menu. Use each language’s own name rather than a flag, and keep visitors on the equivalent page when they switch; our guide to planning a multilingual website covers switcher design.
A 15-minute navigation check
On a laptop and a phone, tick what is true today:
Then stop it growing back: agree who can add menu items, make each one earn its place against the top tasks, and review the menu against analytics once or twice a year.
What to do next
Navigation is where the rest of a website’s planning becomes visible. Get the inventory, groups and labels right, test them with real people, and choosing the menu pattern becomes straightforward.
Planning a new site? Our website design and development process starts with a strategy session and a sitemap, so groups and labels are settled before anyone designs a menu. If your current menu has grown out of control, a free website audit looks at how your menus work on a phone and whether a first-time visitor can tell what you do and how to get in touch.