order
Site Header
A site nav bar: logo, links, an optional theme toggle and search, and trailing content.
App headerLogo, a mega-menu item and a signed-in avatar
In context
Project pageTheme toggle and live search turned on
Fields
| Prop | Type | Required | Default |
|---|---|---|---|
logo | { label: string, href?: string, iconSrc?: string, iconPath?: string, iconViewBox?: string } | Yes | — |
items | NavBarItem[] | Yes | — |
ariaLabel | string | No | "Main" |
trailing | { kind: "text", text } | { kind: "login", label?, href? } | { kind: "avatar", name, avatarSrc?, href?, placeholder? } | No | — |
themeToggle | boolean | No | false |
constructSearch | { source: string, placeholder?: string } | No | — |
Shape
{ type: "site-header", logo: {...}, items: NavBarItem[], ariaLabel?: string, trailing?: {...}, themeToggle?: boolean, constructSearch?: {...} }