Navbar

You might say

Put the main sections in the top navigation, and make it clear which page I'm on.

Keep the brand, main destinations, and key action easy to reachA website navbar helps visitors understand where they can go and how to return home. Keep the number of primary links manageable, show the current section when useful, and adapt the menu for smaller screens without hiding essential paths.

Navbar≠Header

header is the complete top page area and can include brand, search, and sign-in. navbar is the portion dedicated to primary navigation.

When to use it

Primary website navigation
Brand and home link
Access to sign in or a key action
A compact menu that remains consistent across pages

When NOT to use it

Put every page in the top row
Use labels that change between pages
Hide important links only in a desktop hover menu
Let a sticky navbar cover the content below

Anatomy

The brand mark, which conventionally links back to the homepage

Navigation links; their number depends on the information architecture and available space, and the current item is identified

An optional high-frequency action, such as sign-in, registration, or a trial

Variants

Standard

For a site with a small, clearly organized set of navigation links

WithCTA

When signing up, signing in, or starting a trial is a common next step

Sticky

When long pages need persistent cross-page navigation

Typical use cases

Company site

Product site

Documentation header

Mobile navigation