AppHeader
AppHeader — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
AppHeader — Prism component.
Accessibility
Arrow keys move between items; the current item is marked aria-current. Tabs follow the WAI-ARIA tabs pattern (roving tabindex, Home/End).
Import
const { AppHeader } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
brand | React.ReactNode | Yes | Brand lockup node (logo + wordmark). |
brandHref | string | — | |
nav | AppHeaderNavItem[] | — | Inline primary nav; collapses into the side nav below collapseAt. |
actions | (AppHeaderAction | React.ReactElement)[] | — | Action buttons at the end (icons), or custom nodes. |
sideNavExtra | AppHeaderNavItem[] | — | Extra items shown only in the side-nav drawer. |
hasSideNav | boolean | — | Force the hamburger + drawer on (else shown when sideNavExtra exists or nav collapses). |
collapseAt | number | — | Width (px) of the header below which inline nav collapses. Default 720. |
theme | "light" | "dark" | — | Force an explicit header appearance independent of the app theme (e.g. a dark header on a light app). Omit for the default inverse bar. |
className | string | — |