① TopBar
40px — dark grey strip, trust items left, selector pills right
② MainBar
80px — logo, full-width search, auth actions
③ NavBar
44px — primary nav links + secondary utilities
Header
StableSite-wide header with three-tier desktop layout (top bar, main bar, nav bar) and a collapsible mobile drawer. Supports authenticated and guest states.
Overview
The Header is a three-tier desktop layout — TopBar, MainBar, and NavBar — plus a collapsed mobile bar. It supports two authentication states (guest and authenticated) and two variants (standard and enterprise).
Desktop — Authenticated
Full three-tier desktop header showing the authenticated user state: account pill with avatar initials and company name, cart icon, and Quick Order in the nav bar.
Desktop — Guest
Guest state shows Sign In (secondary) and 'Log In / Get a Quote' (primary teal) buttons in the main bar. The nav bar hides Quick Order.
Mobile header bar
On mobile, the three-tier layout collapses to a single 60px bar. The hamburger opens the navigation drawer. The logo is centred. Authentication actions are displayed in compact form.
Mobile — Both states
Left: authenticated user (cart badge + avatar initials). Right: guest (compact Sign In + Log In buttons).
Authenticated user
Guest
TopBar selectors
The four TopBar pills (Pricing, Store, Language, Currency) open small dropdown panels. Each panel lists the available options with a teal check on the active selection.
Selector dropdown panels
All four selector panels rendered side by side: pricing mode, store region, display language, and currency. The active option is highlighted with a teal check indicator.
Anatomy
① TopBar② MainBar③ NavBar
Design tokens
| Token | Value | Description |
|---|---|---|
background/inverse | #3b3b3d | Top bar background |
background/surface | #ffffff | Main bar + nav bar background |
background/brand/primary | #318272 | All Products active pill, search button, primary CTA |
text/primary | #3b3b3d | Navigation link text |
text/inverse | #ffffff | Top bar text and button labels on teal |
text/brand | #207264 | Active nav link and "Quick Order" |
text/secondary | #4f5052 | Secondary nav links and utility text |
border/default | #cccccc | Bar bottom border and pill borders |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
auth | "guest" | "user" | "guest" | Authentication state — controls right-side actions in the main bar. |
variant | "standard" | "enterprise" | "standard" | Enterprise variant uses teal TopBar and adds a Premium Account tier label. |
showQuickOrder | boolean | false | Show the Quick Order link in the NavBar — typically for enterprise authenticated users. |
storeName | string | "DE" | Active store region code displayed in the TopBar store pill. |
language | string | "EN" | Active language code displayed in the TopBar language pill. |
currency | string | "USD" | Active currency code displayed in the TopBar currency pill. |
userName | string | — | User's display name shown in the account pill (authenticated state only). |
companyName | string | — | User's company name shown in the account pill sub-label. |
Content guidelines
Do
- Keep navigation labels short — one or two words max per nav link
- Use the enterprise variant consistently across the entire session once a user is logged in as an enterprise account
- Always show the search button visibly — never hide it behind a toggle on desktop
- Show cart badge only when the cart has items
- Preserve the three-tier hierarchy on all screen sizes ≥ 1024px
Don't
- ✕Don't add more than 6 primary nav links — use a mega-menu if needed
- ✕Don't hide the TopBar on desktop — it carries critical region selectors
- ✕Don't use the header for promotional content — use a banner component below it
- ✕Don't change the TopBar background colour for the standard variant — only enterprise uses teal
- ✕Don't collapse the three tiers into one bar on desktop — it breaks the visual hierarchy
View in Figma: Header ComponentSet (570-32298)