Website Navigation Design
Navigation fails at the label far more often than at the layout. Fix the words first — a beautiful menu of vague nouns still leaves people guessing.
Fix the words before the layout. Most navigation problems are vocabulary problems: a menu of Solutions, Resources and Platform tells a visitor nothing about whether their answer is behind any of them. No amount of animation rescues a label nobody can decode.
Name things the way visitors name them
Internal vocabulary leaks into menus constantly, because the people writing the menu already know what the words mean. The test is simple: could someone who has never seen your site predict what is behind each item?
| Common label | What it usually hides | Better |
|---|---|---|
| Solutions | The actual products | Name the products |
| Resources | Blog, guides, downloads | Guides, or Blog |
| Platform | A feature list | Features |
| Company | About, careers, contact | About |
| Get started | Signup, or a sales form | Whichever it actually is |
Ambiguity has a cost that is easy to miss because it never appears as an error: people do not complain, they leave.
Depth costs more than length
A flat menu of seven items is easier than three items concealing three levels. Each level down is a decision made with less information than the one before, and a guess that turns out wrong usually ends in a back button rather than a second attempt.
Two levels covers almost every site that is not a large shop. If you need three, the structure is probably describing your organisation rather than the visitor's task.
Where a shop genuinely needs depth, the answer is usually filtering rather than nesting: let people narrow a list rather than navigate a tree.
Where people look when the menu fails
Most visitors do not exhaust the menu. They fall back to one of three things, and all three deserve to work:
- Search. Read the queries it receives — they are the most honest list of what your navigation failed to expose.
- The footer, which people treat as the index of last resort. It can be longer and flatter than the header.
- A search engine, arriving on a deep page with no idea where they are. This is why every page needs breadcrumbs or a clear sense of place.
The mobile menu is the real menu
More than half your visitors will only ever see the collapsed version, so design that one first. The header should hold the logo, the toggle, and at most one action — search or the primary conversion.
Three details matter more than the styling:
- Tap targets of at least 44 by 44 pixels. Adjacent links smaller than that produce mis-taps, which read as a broken site.
- The toggle must be reachable. A menu button at the very top of a tall phone screen is a stretch; consider a sticky header.
- Closing must be obvious. An open menu with no visible way out is a trap, and the back button then leaves the site entirely.
The WordPress mechanics of building and assigning menus are in creating a WordPress menu, and the block-theme equivalent is the navigation block. When a menu you configured refuses to appear, that is usually a location assignment rather than a design problem — menu not showing covers it.
Show people where they are
Navigation answers two questions, and the second is quietly more important: where am I now? A current-page indicator, a breadcrumb trail, and a heading that matches the label they clicked all confirm the visitor made the right choice.
Do not rely on colour alone for the current state. Add weight, an underline, or a marker, so the signal survives a colourblind visitor and a low-quality screen — the same reasoning as in choosing an accessible colour palette.
Keyboard and screen reader basics
Navigation is the part of a site most used by people not using a mouse.
- Use real
<a>elements. A styled<div>with a click handler is not reachable by keyboard. - Keep a visible focus outline. Removing it makes the site unusable for keyboard navigation while looking tidier in a screenshot.
- Provide a skip link so the menu can be bypassed.
- Ensure a dropdown opens on focus, not only on hover.
Common mistakes
- Putting everything in the menu. A menu is a set of promises about what matters, and twelve items promise nothing.
- Dropdowns that open on hover with no click fallback. They do not exist on touch devices.
- Clever labels. Wordplay in navigation costs comprehension and gains nothing.
- A logo that is not a link home. People expect it; the exception is a landing page with no home to go to.
- Hiding contact. If people are looking for it, it belongs in the header or the footer, not three levels down.
Verify
Give five people a task each — "find the pricing", "find out whether they deliver to your area" — and watch where they click first. Every wrong first click is a labelling problem, not a user problem. Then run the menu with the keyboard alone, and check every item at 320 pixels wide against the responsive design checklist.
Frequently asked
- Around five to seven for most sites. The limit is not a psychological law but a practical one: past that, the menu stops being scannable and becomes a list people read linearly, which defeats its purpose.
- It reliably reduces how often navigation is used, because it hides the options behind an extra action. On a phone the trade-off is worth it; on a wide screen with room to show the items, it rarely is.
- Yes, closely enough that the visitor recognises they arrived where they intended. A menu item called Solutions leading to a page headed What We Do creates a moment of doubt that costs more than the wording gains.