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
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.
- Documentation and ecommerce sites often need Search in the header.
- Design the mobile header separately: keep the brand and primary actions, and move secondary links into a menu.
- 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.
- Make a fixed header so tall that it obscures content while the user scrolls.
- Omit both a brand marker and a link home, leaving users unsure which site they are on.
- Treat the page header and navbar as the same thing. Distinguish them by the top-level container and their navigation role.
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
Further reading