Header
App top bar with brand, primary navigation links, and an actions slot
Category: navigation · WCAG 2.2-AA · navigation, app-shell, top-bar, banner
States
- default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
labels | HeaderLabels | — | Overrides for the component’s user-visible strings (i18n). |
brand | React.ReactNode | — | Product name or logo area, typically wraps a link |
links | { label: string; href: string; active?: boolean }[] | — | Primary navigation links; active link gets aria-current="page" |
actions | React.ReactNode | — | Right-aligned slot for buttons or an avatar |
sticky | boolean | false | When true, the header sticks to the top on scroll. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-header-bg--cascivo-color-surface--cascivo-color-border--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-bg-subtle--cascivo-focus-ring--cascivo-z-raised
When to use
- Providing a simple marketing or app top bar with brand, links, and actions
- Anchoring primary navigation across pages of a site
- Keeping the bar visible while scrolling (sticky)
When not to use
- Dense console apps with dropdown nav, global icon actions, and a hamburger — use ShellHeader
- Section headings within page content — use Heading
How to build an accessible Header in React →
Examples
Basic
<Header brand="cascivo" links={[{ label: 'Docs', href: '/docs' }]} />With actions
<Header brand="cascivo" actions={<Button size="sm">Sign in</Button>} />Sticky
<Header sticky brand="cascivo" links={links} />Related components
- ShellHeader — ShellHeader is the console-grade header with dropdowns and icon actions