Most business websites need a short, visible top navigation on desktop and a clearly labelled menu on mobile. Mega menus suit sites with many pages, and hidden menus suit content-heavy, browse-oriented sites. The right choice depends on how many sections you have and what visitors most often do, and it should rest on a sound information architecture.
Desktop patterns
Simple top bar
A horizontal row of five to seven items is the default for small business sites. Everything is visible, so nothing is hidden behind a click. It breaks down when you have many sections or long labels.
Dropdown menus
Dropdowns tuck sub-pages under a parent. They save space, but small targets and fragile hover behaviour can frustrate users. The W3C’s accessibility tutorial on menus says submenus should work with both mouse and keyboard, and “should not disappear immediately after the mouse has left the clickable area”.
Mega menus
The Nielsen Norman Group says mega menus work well when a site has many options or when you want to reveal lower-level pages at a glance. Their guidance includes:
- Group related options the way users think, ideally informed by card sorting.
- Keep labels concise, start with the most informative word, and make sibling labels distinct.
- Show each choice only once, since duplicates make users wonder if options differ.
- Wait about half a second before opening a hover menu, and keep it open while the pointer moves toward it.
- Do not hide the search box inside the menu.
- Provide a regular page listing all the options as a fallback.
A site with five services probably does not need one. A site with several service lines, each with sub-pages, may.
Mobile patterns
The Nielsen Norman Group’s review of mobile navigation patterns describes these trade-offs:
| Pattern | Works when | Trade-off |
|---|---|---|
| Top bar | Only a few options | Uses space above the fold |
| Tab bar | About five or fewer options (mostly apps) | Hidden items are easily missed |
| Hamburger menu | Many options, content-heavy browsing sites | Least discoverable; the label “Menu” may work slightly better than the icon |
| Navigation hub | Task-focused sites with one task per visit | Uses homepage space and adds a step |
Their core point is a trade-off between content priority and navigation visibility: pick the pattern whose drawbacks hurt your users least.
Accessibility rules to keep
- Consistent order. WCAG 2.2 success criterion Consistent Navigation (level AA) requires repeated navigation to appear in the same relative order each time, so people do not have to relearn the layout.
- Mark up the structure and label each menu appropriately.
- Do not rely on colour alone to show the current page.
- Make targets large enough for touch and for people with fine motor difficulties.
- Keep everything keyboard operable.
A decision framework
- Count your top-level sections. Up to about seven: a simple top bar.
- Check depth. If each section has many sub-pages, consider a mega menu on desktop.
- Identify the primary action (enquire, book, buy) and keep it visible as a button in the header, on every screen size.
- Choose a mobile pattern based on the number of options and how often people navigate between sections.
- Test with real tasks on a real phone, not just a resized desktop window.
Mistakes to avoid
- Labels that only make sense to you (“Solutions”, “Synergies”).
- Different menus on different pages without a reason.
- Menus that need precise mouse movement to reach a submenu.
- Putting the contact path three clicks deep. Navigation that hides how to enquire works against conversion.
- Choosing motion-heavy menus for effect. If you add animation, honour reduced-motion preferences, as discussed in interactive websites.
Where Radiance Impact fits
Radiance Impact’s Technology division designs and builds business websites, including navigation and mobile behaviour. See /technology, or contact us to talk about your site.
Sources
- Mega Menus Work Well for Site Navigation, Nielsen Norman Group
- Mobile Navigation Patterns, Nielsen Norman Group
- Menus Tutorial, W3C Web Accessibility Initiative
- Understanding SC 3.2.3: Consistent Navigation (WCAG 2.2), W3C
