Website Navigation Best Practices: Help Visitors Find More
Website navigation best practices come down to three rules. Use real links Google can crawl, keep the menu in the same order on every page, and make the targets big enough to tap. Seed Light builds navigation before any page design.
Navigation is the part of a site everybody has an opinion about and nobody tests.
It is also where a visit quietly ends. Somebody who cannot find the page they wanted does not complain, they simply leave and try a competitor.
It is also one of the few areas where the right answer is partly written down, in accessibility standards and in Google's own crawling documentation.
So most website navigation best practices lists are preference dressed as rules, while four genuine requirements go unmentioned.
This guide covers the rules that are actually documented, the ones that are myths, and how to design a menu people and crawlers can both use.
Key Takeaways
- Use real links. Google says it can generally only crawl a link if it is an anchor element with an href.
- Keep the order consistent. WCAG 2.2 requires repeated navigation to occur in the same relative order on every page, at Level AA.
- Provide a way past it. Bypass Blocks is a Level A requirement, usually met with a skip link.
- Make targets big enough. The minimum is 24 by 24 CSS pixels at Level AA.
- The seven item rule is not real. Google documents no limit on menu items or depth.
What Navigation Has to Do
Two audiences, and they want the same thing for different reasons.
A visitor needs to see, without reading carefully, whether this site has what they came for. A crawler needs to find every page you care about.
Neither is served by a menu that looks impressive. Both are served by one that is predictable. It is an unglamorous target, and it is the right one.
Both fail in the same circumstances. Good website navigation is rarely a trade off between people and search.
A menu a crawler cannot read is usually one a keyboard user cannot operate either, and the fix serves both at once.
The Website Navigation Best Practices That Are Documented
Most navigation advice is preference. These four are not, and all four are free to check on a site you already have.
Google states that it can generally only crawl your link if it is an anchor element with an href attribute, and that it cannot reliably extract URLs from anchor elements without one. Its not recommended examples include a span with an href and an anchor with only an onclick handler.
This catches modern sites more than old ones. A framework that routes clicks in the browser can produce a menu that works perfectly for people and does not exist for a crawler.
Three of the four come from the accessibility standard rather than from Google.
WCAG 2.2 adds three. Bypass Blocks at Level A requires a mechanism to skip blocks of content repeated on multiple pages. Focus Visible at Level AA requires a visible keyboard focus indicator. Consistent Navigation at Level AA requires repeated navigation to occur in the same relative order each time, unless the user initiates the change.
And Target Size at Level AA sets a minimum of 24 by 24 CSS pixels, with documented exceptions for spacing, inline links and a few other cases.
Those are navigation design best practices with sources attached. Most lists cannot say that.
How to Design Website Navigation
Five steps. The first is done on paper.
1. List the pages before the menu
Write down every page that must exist, then group them. The menu is the output of that grouping rather than the input.
Group by what a customer is trying to do rather than by how your business is organised internally. Departments mean nothing to somebody who arrived from a search.
Most overcrowded menus are a structure problem rather than a design problem.
Knowing how to design website navigation starts here, on paper, before anybody opens a design tool.
2. Name things the way customers do
Services, not Solutions. Prices, not Investment. The words a customer would use when describing what they want.
The test is whether the label survives being read out of context. About and Contact always do. Nobody has ever improved on either.
Clever labels cost you the one thing navigation exists to provide. That thing is recognition at a glance.
Read your menu aloud to somebody outside the business. Any item they hesitate on is an item that needs renaming.
3. Build it from real links
Every item should be an anchor element with an href. Google's documentation is explicit that this is what it can crawl.
For image links, Google uses the alt attribute as the anchor text, so a logo linking home should have alt text rather than an empty attribute.
Google also asks for anchor text that is descriptive, reasonably concise and relevant. Click here fails all three and still appears on most sites.
That applies to in page links as much as to the menu, and in page links are where most sites are casual about it. Read more is the usual offender.
4. Keep it identical everywhere
Same items, same order, every page. That is the Consistent Navigation requirement, and it is also easier to use.
The common breach is a landing page with its own stripped menu. If you do that deliberately for a campaign, know that it is a documented exception you are choosing to make.
Add breadcrumbs once you have real depth. Google uses breadcrumb markup to categorise the information from the page in search results, and the structured data needs at least two list items.
A two level site does not need them. A site with services, locations and a blog usually does, and they help a visitor who arrived from search on a deep page.
5. Test it with a keyboard
Tab through the header. You should be able to reach every item, see where you are, and skip past the whole block to the content.
Do it on the live site rather than in a design file. Focus styles are one of the first things a theme removes for looking untidy.
If you cannot see where you are while tabbing, neither can anybody navigating without a mouse, and that is a Level AA failure rather than a preference.
That single test covers three of the four documented requirements at once.
These site navigation tips are deliberately unglamorous, and the keyboard pass finds more real faults than any design review.
Site Navigation Tips Worth Following
- Put the phone number in the header. For a service business it is a navigation item in everything but name, and the one people look for first.
- Give the logo an alt and a link home. Google reads the alt as the anchor text.
- Use a footer menu for the rest. Legal pages and secondary links belong there rather than in the header, where they compete with the items that matter.
- Add padding before shrinking text. Target size is a documented minimum and font size is not, so padding is the safer lever.
- Keep the current page marked. Visitors should be able to see where they are without reading the address bar, and it costs one CSS class.
- Write anchor text that describes the destination. Google asks for descriptive, reasonably concise and relevant.
Website Navigation Best Practices That Are Actually Myths
| Claim | Status | What is documented |
|---|---|---|
| Seven items maximum | Myth | Google publishes no limit |
| Three click rule | Myth | Not in Google's crawl documentation |
| Menus must be crawlable links | True | Anchor element with an href |
| Order must be consistent | True | WCAG 2.2 at Level AA |
The pattern is worth noticing. The rules with numbers attached are usually invented, and the real requirements rarely come with a round number.
When somebody quotes a navigation design best practices rule at you, ask where it is published. Half of them trace back to a misreading of a psychology paper from 1956.
Common Website Navigation Mistakes
- Menus built from click handlers. Google says it can generally only crawl an anchor element that carries an href attribute.
- Reordering the menu on some pages. That is a documented accessibility failure, not a design choice.
- Removing the focus outline. Focus Visible is a Level AA requirement.
- Tap targets under the minimum. Twenty four by twenty four CSS pixels, with exceptions.
- Clever labels. Nobody searches for Solutions, and nobody scans a menu for it either.
- Hiding the contact route. The one item people look for first should never need a dropdown.
- Treating website navigation best practices as decoration. Four of them are published requirements, and a site either meets them or does not.
FAQs
How many items should a menu have?
There is no documented limit, and anybody quoting one is repeating a myth. Google publishes no maximum for menu items or depth. The practical test is whether a visitor can scan your menu without reading it twice. In practice that lands around five to seven items.
Does navigation affect SEO?
It affects whether pages are found at all. Google says it can generally only crawl a link if it is an anchor element, and that it cannot reliably extract URLs from anchor elements without an href. A menu built from click handlers is invisible to it.
Should the menu be identical on every page?
Yes, in order at least. WCAG 2.2 success criterion 3.2.3 at Level AA requires navigational mechanisms repeated across pages to occur in the same relative order each time, unless the user initiates a change. Consistency is a requirement rather than a preference.
What is a skip link and do I need one?
It lets a keyboard user jump past the menu to the content. WCAG 2.2 criterion 2.4.1 at Level A requires a mechanism to bypass blocks of content repeated on multiple pages, so a skip link is the usual way sites meet that requirement.
How big should a menu item be to tap?
WCAG 2.2 criterion 2.5.8 sets a minimum target size of 24 by 24 CSS pixels at Level AA, with exceptions for spacing, inline links and a few other cases. Most text links in a tight mobile menu fail that without extra padding.
Conclusion
The website navigation best practices that matter are documented rather than debatable. Real links, consistent order, a way to skip the block, and targets big enough to hit.
Fix those four and the rest of the argument stops mattering very much.
Everything else is preference, including the item counts people quote at you.
Spend the saved argument on the page list instead. A good structure makes almost any menu design work, and no menu design rescues a bad one.
If you would rather have the structure decided properly, see how we approach web design.
