Navbar Design Examples
The navbar is the most-seen component on any website. Good navigation is short, predictable and makes the main action obvious without shouting.
By Mohamed Farhan · Updated Oct 19, 2026
Inside the example
The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing px-5 (20px), py-3 (12px), gap-6 (24px), gap-4 (16px), px-3.5 (14px), py-2 (8px). Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.
Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.
Anatomy
- 1.Logo
- Links to home; left-aligned on most sites.
- 2.Primary links
- Four to six top-level destinations, named by what users want.
- 3.Utility links
- Sign in, language, search: visually quieter.
- 4.Primary action
- One button such as 'Start free' or 'Book a demo'.
- 5.Mobile menu
- A menu button that opens a full list of the same links.
Common variations
- Simple horizontal navbar with a logo, four to six links and one action. The default for most marketing sites.
- Mega menu navbar, where top-level items open large panels with grouped links, descriptions and sometimes images. Common for products with many features or audiences.
- Floating or contained navbar, set inside a rounded container with margin around it, often used on modern marketing sites.
- Transparent navbar over a hero, which becomes solid on scroll so text stays readable.
- App top bar inside products, with search, notifications and the user menu rather than marketing links.
States to design
- Default: links in a neutral color, one primary button.
- Hover and focus: a clear but quiet change such as a color shift; focus must be visible for keyboard users.
- Current page: marked with weight or color plus aria-current="page".
- Scrolled: often a compact height or a solid background if it started transparent.
- Mobile menu open: full list of links, the primary action and an obvious close control.
A walkthrough
A product manager lands on a SaaS homepage from a search result. In a glance at the navbar she sees Product, Pricing, Customers and Docs, plus a single 'Start free' button. She hovers Product and a panel shows four feature groups with one-line descriptions, so she understands the scope of the product without leaving the page.
She clicks Pricing. The Pricing link is now heavier than the others, so she knows where she is. As she scrolls down the comparison table, the navbar shrinks slightly but stays available, and the 'Start free' button is always one click away. Later, on her phone, she opens the menu, sees the same links in the same order with large tap targets, and finds the docs in two taps.
How different products use it
SaaS marketing sites typically show Product, Solutions or Use cases, Pricing, Customers and Docs, with Sign in as a text link and one primary button such as 'Start free'.
Ecommerce stores put categories in the navbar, often with mega menus, and keep search, account and cart icons on the right. Search is usually visible rather than hidden behind an icon.
Editorial and media sites use section links (News, Culture, Opinion) and a prominent subscribe action, sometimes with a second row for trending topics.
Visual design guidelines
Most navbars are between 56 and 80px tall on desktop. Keep link text at 14 to 16px with consistent spacing of 24 to 32px between items, align the logo and links to the same content grid as the page, and make sure the primary button is the only filled element. A subtle background or border appears on scroll if the navbar is sticky, so content scrolling underneath stays separated.
Best practices
Do
- Keep top-level links to six or fewer.
- Show the current page with weight or color, not a decorative mark.
- Make the primary action the only button in the bar.
- Keep the same navigation on every page.
Don't
- Do not hide all navigation behind a hamburger on desktop.
- Do not use vague labels like 'Solutions' and 'Resources' without dropdown context.
- Do not put two competing buttons in the navbar.
On mobile
On small screens, collapse links behind a menu button but keep the logo and, if possible, the primary action visible. The opened menu should list the same destinations as desktop, use large tap targets of at least 44 to 48px, and close when a link is chosen. Avoid hiding search behind two taps on content-heavy sites.
Common mistakes
- Too many top-level items, which forces users to scan and makes everything feel equally important.
- Vague labels such as 'Solutions' or 'Resources' with no hint of what is inside.
- Two competing buttons, like 'Sign up' and 'Book demo' with equal weight.
- Sticky navbars that are too tall, eating valuable space on small screens.
Edge cases to plan for
- Long translated labels. German or French labels can be twice as long; test the navbar in every language.
- Logged-in vs logged-out states. Replace Sign in and the primary button with an account menu once users are signed in.
- Announcement bars. If you add a banner above the navbar, account for it in sticky positioning.
- Very small laptop screens. Check widths around 1024 to 1280px where links often start to collide.
Accessibility checklist
- Wrap navigation in a nav element with an aria-label.
- Mark the current page with aria-current="page".
- Make the mobile menu button announce its expanded state with aria-expanded.
Implementation notes
Use a nav element with an aria-label, a list of links and real anchor elements. For dropdowns, follow the disclosure pattern: a button with aria-expanded that shows and hides a list of links. Make sure the menu is fully usable with a keyboard and that focus is trapped only inside full-screen mobile menus.
In your design system
As a design system component, the navbar should expose slots for the logo, primary links, utility links and one action, plus variants for transparent, solid and compact states. Define tokens for height, link spacing and the active-link treatment, and document the mobile menu as part of the same component so both stay in sync whenever links change.
How to measure whether it works
Look at click maps and analytics for navbar links: items that are rarely used may belong in the footer, while frequently used pages hidden in submenus may deserve a top-level spot. Tree testing and first-click testing are useful for checking whether labels make sense to new visitors.
Pre-launch checklist
Microcopy you can use
A step-by-step design process
- List every destination and group them; only the most important groups become top-level links.
- Choose one primary action and make it the only button.
- Decide sticky behaviour and how the navbar changes on scroll.
- Design dropdowns or mega menus only for groups that genuinely need them.
- Design the mobile menu with the same destinations in the same order.
- Test labels with first-click tests before building.
Usability test tasks
Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:
- Find the pricing page from the homepage.
- Start a free trial from any page.
- Find documentation on a phone.
- Tell which page you are currently on.
Key terms
- Mega menu: A large dropdown panel that shows grouped links and descriptions.
- Sticky header: A navbar that stays fixed at the top while the page scrolls.
- Disclosure: A button that shows or hides related content, used for dropdowns.
- aria-current: An attribute that tells assistive technology which link is the current page.
Writing the copy
Label links with nouns users already use: Pricing, not Plans and Packages; Docs, not Knowledge Hub. Keep labels to one or two words. For the primary button, describe the outcome: 'Start free', 'Book a demo', 'Get the app'. Avoid clever names in navigation; save personality for headlines.
Prompts to generate variations
If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:
- Design a SaaS marketing navbar with logo, Product mega menu, Pricing, Customers, Docs, Sign in link and a Start free button.
- Create a floating, contained navbar that becomes compact on scroll, with a full-screen mobile menu.
- Design an ecommerce header with category navigation, visible search, account and cart icons.
Related patterns
The navbar works together with the sidebar navigation inside your product, breadcrumbs on deep pages, and the search bar on content-heavy sites.
Generate this pattern for your product
Inspo AI designs the full pattern with every state, grounded in how real products solve it, and exports React + Tailwind.
Sources and further reading
- WAI-ARIA APG: Navbar · The W3C reference for accessible keyboard and screen reader behaviour.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Nielsen Norman Group articles · Usability research on interface patterns.
More UI patterns
Questions people ask
How many items should a navbar have?
Usually four to six primary links, plus sign in and one primary action. More than that is hard to scan.
Should the navbar be sticky?
Sticky navbars help on long pages, but keep them compact so they do not take too much screen height, especially on mobile.
Where should the main CTA go in a navbar?
On the right side, as the only filled button, so it stands out from the text links.
Should the navbar logo be centered or left-aligned?
Left-aligned is the most common and easiest to scan. Centered logos work for fashion and editorial brands with few links.
When should I use a mega menu?
When you have many destinations grouped into clear categories, such as large product suites or ecommerce stores.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.