Site Header
v0.1.4DraftA site header with a brand slot, navigation links and optional actions; once the header itself is at least `64rem` wide the links sit inline, and narrower a menu button opens them in a right-hand Drawer.
A site header with a brand slot, navigation links and optional actions; once the header itself is at least 64rem wide the links sit inline, and narrower a menu button opens them in a right-hand Drawer.
Usage
Pass linkComponent (for example Next's Link) to render the links through your router. The package ships no "use client": it keeps the menu open state, so re-export it from your app's client boundary file.
The Drawer's Close button keeps its fixed English "Close" label.
The root is an inline-size container, so it needs a definite width: as a flex item without a width, or under align-items: center, give it width: 100% or it collapses.
Examples
Open all 2 →Properties
SiteHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
brand* | ReactNode | — | Brand slot at the start of the bar; rendered as given, so pass your own home link |
links* | SiteHeaderLink[] | — | Navigation links: inline once the header itself is at least `64rem` wide (a container query), in a Drawer when narrower |
menuLabel* | string | — | Accessible name of the menu button, the navigation landmarks and the Drawer title, already translated |
actions | ReactNode | — | Optional actions that stay in the bar at every breakpoint, e.g. a booking button |
className | string | — | Additional class names to merge with the component root element |
linkComponent | ElementType<SiteHeaderLinkProps> | a | Component that renders each link, so a router link such as Next's `Link` can be injected. Receives `href`, `children` and the item's props. Defaults to `a`. |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).