Header

You might say

How should the top bar be laid out? It needs to fit the logo, navigation, and sign-in button.

The top section of a page that introduces the site or page and often contains navigationA Header usually holds the brand and the paths people need first, such as main navigation, search, or account access. It is broader than a Navbar, which is specifically the navigation portion.

Site Header

New version has been released · Check for updates

◆ VibeUIProductTemplatePricingDocumentationLogin

◆ VibeUI☰

Quick checkChoose the best answer

A desktop header contains brand, five navigation items, search, and login, but wraps to two lines on mobile. How should it adapt?

Keep brand and the key action, and move secondary navigation into a dismissible mobile menuKeep every entry and reduce type, gaps, and button height until they fit one lineHide the brand and home entry while keeping navigation, search, and login

You can say this to an AI Agent

Prioritize the header: keep brand, primary navigation, search, and login on desktop; retain brand and the key action on mobile and move the rest into a dismissible menu. Verify focus, current-page state, and long labels.

Header≠Navbar

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

Use a page header when the brand, primary navigation, and account controls need to stay together at the top.
◆ BrandProductPricingSearch · Sign in
Documentation and ecommerce sites often need Search in the header.
Documentation⌕ Search documentsSign in
Design the mobile header separately: keep the brand and primary actions, and move secondary links into a menu.
◆ Brand☰
Put temporary announcements above the header, and keep their purpose distinct from navigation.
New version released · Check for updates
◆ BrandProduct Documentation Login

When NOT to use it

Cram every navigation link and action into the header, making important actions hard to find.
Brand · Product · Solutions · Customers · Pricing · Docs · Blog · Events · Careers · Search · Sign in · Sign up
Make a fixed header so tall that it obscures content while the user scrolls.
The fixed header takes up nearly half the screen.
Omit both a brand marker and a link home, leaving users unsure which site they are on.
ProductPricingHelpSign in
Treat the page header and Navbar as the same thing. Distinguish them by the top-level container and their navigation role.
ProductPricingDocs

Anatomy

◆ BrandProduct Pricing DocumentSearch Login

Identifies the site and conventionally links to the homepage

Holds the site’s primary navigation and may be part of the page header

Utility controls such as search, language selection, sign-in, and account access

Variants

Single Row

For a marketing site with a small set of primary links

Two Rows

When including announcements, category navigation, or large searches

Mobile

On narrow screens, keep the brand and provide a menu control

Typical use cases

Company website

◆ NimbusProduct Price CustomerStart for free

Documentation

Document Center⌕ Search Documentsv2.4

Storefront

◆ Orange Selection Mall⌕ Search for productsShopping Cart

Homepage Home Appliances Digital Outdoor Food

Mobile header

◆ Nimbus☰

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.