SiteHeader

Frames · src/components/SiteHeader/SiteHeader.tsx

The site's top bar: the mark, up to six sections, and the controls at the end.

Six is a cap, not a suggestion - the list is sliced. A seventh section makes the bar wrap on a laptop, and a navigation that reflows is a navigation people stop trusting.

A section with children opens on hover AND on click, and the trigger is a real button with aria-expanded. Hover alone is unreachable by keyboard and unusable on touch.

Escape closes everything, from anywhere. The theme control travels into the mobile drawer, where the bar has no room for it - which is why ThemeSwitch keeps two instances in step.

Import

import { SiteHeader } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
mark	React.ReactNode
homeHref	string
homeLabel	string
sections	SiteHeaderSection[]	At most six are rendered; the rest are dropped rather than wrapped.
navLabel	string
menuLabel	string
themeLabel	React.ReactNode
theme	React.ReactNode
lang	React.ReactNode
action	React.ReactNode
stuck	boolean
className	string

Exported types

SiteHeaderItem, SiteHeaderSection