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
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.
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.
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
Mobile header
◆ Nimbus
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check