Site Header v0.1.5 · @behivetech

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

1<SiteHeader
2  brand={<a href="/">The BEhive</a>}
3  links={[
4    { href: "/guide", label: "Guide", current: true },
5    { href: "/gallery", label: "Gallery" },
6  ]}
7  menuLabel="Menu"
8/>

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 →

Basic Site Header

1const LINKS = [
2  { href: "/guide", label: "Guide", current: true },
3  { href: "/gallery", label: "Gallery" },
4  { href: "/art", label: "Art" },
5  { href: "/artists", label: "Artists" },
6];
7
8const BasicSiteHeader = () => (
9  <SiteHeader
10    brand={<a href="/">The BEhive</a>}
11    links={LINKS}
12    menuLabel="Menu"
13  />
14);
15
16render(<BasicSiteHeader />);

Site Header With Actions

1const LINKS = [
2  { href: "/guide", label: "Guide", current: true },
3  { href: "/gallery", label: "Gallery" },
4  { href: "/art", label: "Art" },
5  { href: "/artists", label: "Artists" },
6];
7
8const SiteHeaderWithActions = () => (
9  <SiteHeader
10    brand={<a href="/">The BEhive</a>}
11    links={LINKS}
12    menuLabel="Menu"
13    actions={<Button size="sm">Book direct</Button>}
14  />
15);
16
17render(<SiteHeaderWithActions />);

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, …).

Usage

Examples

Properties

SiteHeader props

`SiteHeader` props