Vantage
A classic bar: logo on the left, inline nav in the middle, a sign-in link and a solid call to action on the right.
Navbar section templates
The navigation bar sets expectations before anyone has read a word of the page: what this site is, what it contains, and what it wants you to do. It is also the one element visitors look for the moment they feel lost.
12 navbar section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Marquee
Two tiers — a tinted utility strip carrying an announcement and quick links, above the main navigation bar.
Helm
A floating pill bar with a full-round edge and a deep shadow, centered so it reads as detached from the page top.
Vista
Logo on the left, the inline nav centered, and a call to action on the right.
Bearing
A balanced split bar: half the links to the left of a centered wordmark, the rest to its right beside the button.
Crest
A stacked magazine header — the wordmark centered on the top row, the nav centered on a second row beneath a divider.
Hatch
A minimalist bar that hides its nav behind a labelled Menu button, showing only the wordmark and one action.
Scout
A bar with search: logo, inline nav, a pill search field and a call to action.
Sextant
A classic bar whose first nav item is a dropdown trigger, marked by a caret, for a products or resources menu.
Onyx
A bold bar on a full primary surface with the button inverted — the one navbar that sits on colour.
Tier
The nav links sit inside a rounded segmented pill in the centre, the active link filled as its own segment.
Rail
App-style underline tabs, the active item carrying a solid underline on the bar's baseline.
How to choose a navbar section
Count your destinations. Four to six links fit comfortably in a classic bar. More than that needs grouping, or a two-tier bar that separates utility links from the main ones. A floating pill bar reads as more contemporary and suits marketing pages; a plain bar disappears into the page, which is what you want on anything people use rather than browse.
At a glance
- Layouts
- 12 distinct navbar sections
- Styles covered
- bar, classic, two-tier, utility, floating, pill, centered-nav, split
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Navbar section FAQ
How many links should a navigation bar have?
Four to six top-level items. Beyond that, people stop reading and start scanning for a search box. Extra destinations are better grouped under a small number of headings than added to the row.
Should the navbar include a call to action?
One, usually at the far right, visually distinct from the navigation links. It gives anyone who is already convinced somewhere to go from any page, without hunting for the hero button.
Should the navigation stay fixed when scrolling?
On long pages a sticky bar saves a lot of scrolling back. On short pages it mostly takes up space. If you do make it sticky, keep it slim — a full-height bar that follows you down the page costs real reading room on a phone.