navigation contract
Header
Top app bar — branding, primary navigation, account menu, search.
Variants
- app
- Authenticated app shell — logo + nav + user menu
- marketing
- Public site — logo + nav + CTAs
- minimal
- Logo only — for full-screen flows (auth, onboarding)
Sizes
- sm
- 48pt height
- md
- 56pt height
- lg
- 64pt height — marketing
Slots
- leading
- Logo + optional menu trigger
- center
- Primary nav (desktop) or search
- trailing
- Account menu / CTAs / theme toggle
Example
<Header><HeaderBrand /><HeaderNav items={items} /><HeaderUserMenu /></Header>Usage rule
role="banner" on the outermost element.
The full Header contract has 5 more rules, plus the do-not patterns. Get the full recipe.