Navigation is the most used component on any website and usually the least designed. It gets copied from the last project, filled with whatever the leadership team wanted visible, and shipped without anyone checking whether a stranger can find the thing they came for. Structure is a separate problem, already covered in how to decide what pages exist and what they are called. This is about the interface that exposes it.
Five to seven items, and one of them is the action
A header carries fewer links than most companies want. Five to seven is the working range, and the last slot should be a visually distinct call to action rather than another destination.
Every additional item reduces the weight of the others. When a header has eleven links, nothing is prominent, and users fall back to scanning the page or leaving. If your business genuinely has more territory than that, the answer is grouping under a small number of parent items, not squeezing the type size until it fits.
Order matters too. First and last positions get remembered most, so put the page that drives revenue at one end and the contact action at the other, and resist the urge to lead with “About”.
Say what things are
The most common navigation failure is not layout, it is vocabulary. “Solutions” tells a visitor nothing. “Platform” is worse. Labels should use the words your buyers use, which are almost never the words your internal teams use.
Concrete beats clever: “Web design” over “What we do”, “Pricing” over “Plans and packages”, “Case studies” over “Portfolio” if that is what your market searches for. Those labels are also links search engines read on every page, so plain naming is an SEO decision as much as a UX one.
Dropdowns and mega menus: use them for breadth, not for hiding
A dropdown is worth adding when a section genuinely has children people need to choose between, such as seven services or a documentation tree. It is not worth adding to make a sparse site look substantial.
If you use one, respect the details that decide whether it feels good or infuriating. Open on hover on desktop but always on click too, since hover does not exist on touch and is unreliable for anyone with a tremor. Add a short delay before closing, so a diagonal mouse path does not dismiss the menu halfway. Keep the panel wide and grouped, with headings and optionally a short description per item, because a mega menu is a page in itself and deserves the same hierarchy as one.
Never make the parent unclickable. If “Services” opens a menu but goes nowhere, you have removed the overview page that a large share of visitors were looking for.
The hamburger belongs on phones
On mobile, a menu icon is the accepted pattern and there is little to argue about, though labelling it “Menu” in text still measurably outperforms a bare icon.
On desktop, hiding a five item menu behind an icon costs engagement for the sake of minimalism. Anything hidden gets used less. If a site has room for the links, the links should be visible; the aesthetic gain is real but rarely worth the traffic that never reaches your services pages.
The mobile version needs proper design rather than a stack of links: large touch targets with real spacing, the primary action pinned where a thumb reaches, a layout drawn for the phone rather than compressed into it, and closing behaviour that is obvious. Test it with one hand on a real device before shipping.
Sticky headers, if they earn the space
A header that follows the scroll is useful on long pages and irritating on short ones. If you use one, shrink it after the first scroll so it takes a thin strip rather than a tenth of a phone screen, and make sure it does not cover the target of an anchor link.
Watch the performance and stability cost too: a header that changes height on scroll is a classic source of layout shift if it is not reserved properly.
The states everyone forgets
Navigation has more states than any other component, and most sites ship half of them.
Hover is the easy one. Focus is the one that matters: keyboard users need a visible ring on every item, and the tab order has to follow the visual order, which is the baseline for an accessible site. The current page needs a persistent marker, because “where am I” is a question navigation is supposed to answer permanently, not just at the moment of clicking. Dropdowns need escape to close and arrow keys to move. And a skip link to main content should be the first thing in the tab order.
None of this is expensive. All of it is invisible until someone cannot use your site.
Search, breadcrumbs, and knowing when you need them
Add site search when the content volume genuinely justifies it, which usually means a large insights library or documentation, and make the results page decent rather than an afterthought. Add breadcrumbs when the site is more than two levels deep, since they help orientation and produce the breadcrumb trail in search results.
Then confirm the whole thing works with the cheapest test there is: ask five people who have never seen the site to find one specific thing, and watch in silence. Every navigation argument we have ever had internally was settled in twenty minutes that way, and the method scales to most design disputes.
Want yours reviewed before the next build? hello@beconfidency.agency, or see how we structure the sites we ship.
If you would rather have the whole site designed to this standard by one team, that is exactly what our web design service is for.