How to design a B2B navigation bar that buyers actually use

A buyer opens the site looking for Pricing. The header says Solutions, Insights, Our Approach, and Company.

They open Insights, hoping for a rate card. It is a blog index. Pricing sits in the footer under a legal stack.

Structure the bar around the jobs a buyer came to do, not the departments that own the pages. Keep those labels in the same order on every template. Hiding the whole bar behind an icon, covered in why hamburger menus hurt conversion on desktop sites, is a separate leak.

Use labels a first-time buyer would say

Write each top-level word as something a visitor would type into search or say on a sales call. If the label needs a hover to explain it, the label failed.

Internal product names, program titles, and clever phrases belong on inner pages. They do not belong in the header. Solutions, Insights, and Our Approach all fail that test for a first visit.

Services, Work, Pricing, About, and Contact are boring on purpose. Boring is scannable. A buyer who has never seen the brand should know what sits behind each word in a second.

The W3C menu structure tutorial treats a website menu as a labeled list inside a navigation landmark. Short labels that distinguish one menu from another help people who jump by landmark. They also help sighted buyers who only glance at the bar.

Mark the page the visitor is on. W3C shows a current-page marker so assistive tech can announce it, instead of relying on color alone. Sighted buyers get the same cue when the active link is visually distinct.

Group pages by the buyer job

Put pages together the way a buyer would ask for them. What you sell, proof that you have done it, what it costs, and how to talk to someone. Do not put pages together because one team owns the CMS folder.

A Resources dump that mixes case studies, careers, the blog, and a partner portal is four jobs under one vague word. Split those jobs. Leave only the proof a buyer needs before a call in the main bar.

What stays in the main bar

Keep the destinations that answer a buying question. What you sell, a proof index, pricing or packages, who you are, and a contact path. Those five cover most B2B evaluation without wrapping the header.

If you sell several services, one Services label that opens a short list of real service names is clearer than a separate top-level item for each offering. A long top-level row is what later forces a toggle on a wide screen.

What moves to utility or footer

Login, client portals, careers, press, and legal do not answer a first-visit buying question. They belong in a smaller utility row or the footer. Leaving them in the main bar steals slots from Pricing and Work.

A careers link in the header tells applicants you are hiring. It also tells buyers that hiring is as important as the work they came to find. Move it unless recruiting is the actual job of the site.

Put evaluation destinations in a visible order

Order the remaining labels the way a deal usually moves. Offer, proof, price, company, then contact. Do not lead with About because it is the oldest page in the CMS.

Pricing in the footer is a hide, even when the rest of the bar is visible. If you publish packages, the label belongs in the same row as Services. If price is sales-only, say Talk to sales instead of burying a PDF under Insights.

Dropdowns are for distinct child pages, not a second sitemap. If every child is a slight rewrite of the parent, skip the dropdown and send people to one strong hub. Nested mystery is how Insights ate Pricing in the opening scene.

This is structure, not a conversion rate optimization (CRO) test of button copy. Do not run a landing-page experiment on the global bar until the labels and order are honest.

Repeat the same labels in the same order

Once the bar is set, copy it onto every template. Inner pages, the blog, and the contact page should not invent a new set of words. Buyers learn one map.

W3C Understanding Success Criterion 3.2.3 requires repeated navigation in the same relative order unless the user asked for a change. A search field that jumps from last to first between templates fails that bar. So does swapping Services and About on the blog layout.

The menu tutorial adds a size rule. Items may collapse on a narrow viewport, but what still shows should keep the same wording, order, and destination. Renaming Contact to Get in touch only on phones is a new map, not a responsive tweak.

A labeled Menu control on a small screen is allowed when the list no longer fits. Changing the desktop labels at the same breakpoint is not. Keep one information architecture and change only how it is disclosed.

Build the bar in this sequence

Do the work on paper before anyone opens a design file. A pretty header with the wrong labels still sends buyers to the footer.

1. List the pages a first-time buyer needs before they will book a call.
2. Write one top-level label per job in words a buyer would actually say.
3. Order those labels as offer, proof, price, company, then contact.
4. Move login, careers, press, and legal into a utility row or footer.
5. Paste the same labels and order onto every template the site ships.
6. Click each label as a stranger and confirm the page matches the word.

If a click lands on a page that does not match the word, fix the label or the page. Do not add a second label to cover the mismatch. Two words for one job is how Insights and Resources both appeared and neither held Pricing.

Unlike a full design and user experience engagement, this post covers only how to structure and label the main bar. For a look at whether the current header is an org chart or a buyer map, start with Get Free Assessment.