Website Navigation Design: The Part Everyone Gets Wrong

Navigation is the most-used component on your site and usually the least considered. It gets designed once, filled with whatever the stakeholders shouted loudest about, and never revisited. Yet almost every "visitors cannot find anything" problem traces back to it.

Start with what people are looking for

Your menu should mirror visitor intent, not your org chart. Look at your search logs and your top landing pages: if "pricing" is the second most-searched term on your site and it is buried under "Company", that is your answer. Label items with the words your customers use, not internal product names.

Keep the primary menu short

Five to seven items is the working range. Beyond that, scanning turns into reading and people stop bothering. If you genuinely have more destinations, the answer is grouping and hierarchy, not a longer bar. And if grouping feels impossible, your site structure is the real problem — see how to structure a website for search.

Say what things are

"Solutions", "Resources", and "Platform" are placeholders that survived to launch. They test badly because they could mean anything. "Services", "Case studies", "Pricing", "Blog", "Contact" are boring and unambiguous, and unambiguous wins.

Make the current location obvious

Highlight the active item. Add breadcrumbs on anything more than two levels deep. People arrive from search on a page three levels in with no idea where they landed, and orientation is what keeps them clicking instead of leaving.

Mega menus: only if you earn them

A mega menu suits a large catalogue with clear categories. It suits a ten-page service business not at all. If you build one: open on click rather than hover, group with real headings, cap it at three columns, and make sure every item is reachable by keyboard.

Mobile navigation deserves its own thinking

The hamburger is fine — it is understood now — but the drawer behind it needs care:

• A visible close button, plus Escape and tap-outside to dismiss.
• Focus moved into the drawer on open and returned to the trigger on close.
• Body scroll locked while it is open.
• Your primary action repeated inside it, not left behind in the header.

Consider a bottom bar for the two or three actions that matter most; it sits where thumbs already are. The wider argument for designing this way is in mobile-first design.

Build it as real links

Navigation must be anchor elements with real href values, present in the HTML. A menu assembled by JavaScript on click is a menu search engines cannot follow and assistive technology struggles with. Use <nav>, use a list, and let the browser do what it is good at — the same reasoning as the accessibility baseline.

Do not forget the footer

The footer is your second navigation and it is where people look when the header failed them. Legal pages, secondary services, contact details, and a small sitemap belong there. It is also a legitimate place to strengthen internal linking without cluttering the header.

Test it cheaply

Write down five tasks — find our prices, find a case study in my industry, find out where you are based — and hand your site to three people who have never seen it. Watch where they hesitate. You will learn more in twenty minutes than from a month of internal debate.

Not sure your structure is helping visitors? Ask me for a look, or browse recent projects to see how I organise different types of site.