By Mehdi HassanWhat are the best practices for website navigation on B2B sites?
The best practices for B2B website navigation are to keep the header short, label items in the buyer's language, make the conversion path visible at all times and push everything else into dropdowns, the footer or in-page links. Navigation isn't a list of everything you have. It's a short list of the questions most buyers arrive with.
Navigation is the visible layer of your site structure, so it only works if the structure underneath is sound. If you haven't defined which pages exist and why, start with our website information architecture guide. This article assumes you have a sitemap and focuses on what goes in the header and how it behaves.
How many items should a website navigation menu have?
A B2B navigation menu should have four to seven top-level items, plus a login link and one primary CTA. That range is our rule of thumb, not a research finding. Fewer items make each one easier to scan and decide on. More than seven usually signals that teams have each claimed a slot, and buyers end up guessing which item hides the answer.
A common, effective SaaS header is: Product, Solutions, Customers, Pricing, Resources, then Log in and a Book a demo or Start free button. Early-stage sites can be shorter still: Product, Pricing, About and a CTA. The right set comes from your sitemap; our SaaS website sitemap template shows which pages earn header placement at each stage.
Header item | Answers the question | Keep it if |
|---|---|---|
Product | What does it do? | Always |
Solutions | Is it for someone like me? | You sell to two or more clear segments |
Customers | Does it work for others? | You have several real stories to show |
Pricing | What does it cost? | Always, even if it's "contact us" |
Resources | Can I learn more first? | You publish guides, a blog or docs regularly |
Company | Who's behind it? | Usually better in the footer unless you're hiring heavily |
Primary CTA | How do I start? | Always, as a button |
How should you label navigation items?
Label navigation items with the plain words buyers use when they search or describe their problem. A label should be predictable: the buyer should know what's behind it before they click. Clever or internal names fail this test even when they sound good in a brand meeting.
- Use nouns buyers already know. Pricing, not Plans and Packages. Customers, not Impact.
- Avoid internal product names. If customers call it reporting, don't label it with your module's codename.
- Keep labels short. One or two words each, so the header fits at common laptop widths without wrapping.
- Be consistent. A menu item called Solutions should lead to pages titled as solutions, not "industries" on one page and "teams" on the next.
The fastest way to check labels is a small tree test: give five target buyers a few tasks, such as "find out what it costs for a team of twenty", and watch where they click. Our card sorting and tree testing guide shows how to run one in an afternoon.
How do you keep conversion paths visible in the navigation?
Keep conversion paths visible by putting pricing and one primary CTA in the header on every page, and by keeping them there on mobile and when the visitor scrolls. B2B buyers often decide to act mid-page, after reading a feature or a customer story, and they shouldn't have to scroll back up or open a menu to do it.
- One primary button. Book a demo, Start free or Get started, styled clearly as a button and placed at the far right.
- Log in as a text link. Existing users need it, but it shouldn't compete visually with the CTA.
- Sticky header, used carefully. A compact sticky header keeps the CTA in reach; make sure it doesn't cover content or anchor links.
- Mobile CTA outside the menu. On phones, keep the CTA button visible next to the menu icon instead of hiding it inside the drawer.
When does a mega menu earn its place?
A mega menu earns its place when buyers need to choose between many destinations under one top-level item, such as a dozen products, several segments and a set of use cases. It lets them see the options together and jump straight to the right page. For a site with three or four pages under each item, a simple dropdown is clearer.
The signs you need one: your Product dropdown has more links than anyone can scan in one column, buyers come in through very different segments, or your products are bought separately by different people. The signs you don't: you'd need to invent groupings to fill the panel, or most links go to thin pages. Our guide to when mega menus help and when they hurt walks through real examples and the rules we apply.
For example, suppose a SaaS company has three products and four industries
For example, suppose a company sells three separate products to four industries and wants every combination in the menu. A simple dropdown would list twelve or more links in one column, which nobody can scan.
A well-built mega menu splits the panel into clear columns: Products on the left with a one-line description each, Industries in the middle, and one featured customer story or guide on the right. Each column heading is itself a link to an overview page. The panel opens on click or a deliberate hover, closes on Escape, and works with the keyboard.
If the same company sold one product to one industry, all of that would be noise. The test is whether the buyer has a real choice to make at that point in the menu.
How should navigation work on mobile?
Mobile navigation should keep the logo, the primary CTA and a menu button visible, and open into a full-screen or full-height panel with the same structure as desktop. Don't build a separate mobile structure; buyers who switch devices should find the same pages under the same labels.
- Make tap targets large enough to hit easily, with clear spacing between items.
- Use accordions for dropdown sections instead of hover behavior, which doesn't exist on touch screens.
- Close the menu after a tap and when the visitor taps outside it.
- Keep the CTA visible in the collapsed header so it's never more than one tap away.
Animation helps when it shows where the menu came from and where it went, and hurts when it delays the content. Our guide to motion design for marketing websites and the article on micro-interactions cover how to keep menu motion quick and purposeful.
How do you make website navigation accessible?
Accessible navigation works with a keyboard, a screen reader and zoom, not only with a mouse. Every menu item must be reachable with Tab, dropdowns must open and close with Enter, Space and Escape, and focus must stay visible as the user moves through the menu.
- Wrap the header menu in a nav element with a clear label, and include a "skip to content" link.
- Use real buttons to open dropdowns, and expose their open or closed state to assistive technology.
- Don't open menus on hover alone; give keyboard and touch users an explicit control.
- Check color contrast on menu text and focus outlines, including over hero images.
MDN's documentation of the nav element is a good reference for the markup.
How do you know your navigation is working?
Your navigation is working when visitors reach pricing, their segment page and the demo or signup page without detours. You can check this with analytics and with small usability tests, and you should check after any major site change.
- Look at the paths from the home page in analytics: are buyers reaching pricing and the CTA, or bouncing between overview pages?
- Track clicks on header items as events, so you can see which ones get used and which are ignored.
- Run a short tree test with a few target buyers after big changes to labels or structure.
- Watch a handful of session recordings of new visitors, focusing on hesitation around the menu.
Navigation changes are a natural fit for ongoing site work. Our comparison of a website care plan vs a design retainer explains which model suits teams that keep iterating on structure.
