SiteHeader
Markdown for agentsSticky marketing/site header: brand, horizontal navigation with prefix-aware active states, right-aligned actions and a mobile drawer.
npx slipstream-ui@latest add site-headerMarketing header
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | ReactNode | required | Brand slot, wrapped in a link to /. |
| items | SiteNavItem[] | required | Primary nav: { href, label, external? }. |
| activeHref | string | — | Current route for active styling (aria-current="page"). |
| match | 'prefix' | 'exact' | 'prefix' | Prefix highlights parents (/docs on /docs/x); exact only identical hrefs. |
| actions | ReactNode | — | Right-aligned actions (theme toggle, GitHub, CTA). |
| linkComponent | React.ElementType | — | Router link element (Next Link, react-router Link). |
| sticky | boolean | true | Pin the bar to the top. |
Accessibility
- Active link carries aria-current="page" with prefix-aware matching.
- Mobile navigation opens in a focus-trapped Drawer.
- External items get target=_blank + rel=noopener.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.