Site Header

v0.1.6
Draft

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.

pnpm add @behivetech/organisms.site-header

This is the snapshot of v0.1.6, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.1.6 are shown as code; only the latest version runs live. Open the live examples →

Brand, four links and no actions. Narrow the header below 64rem to get the menu button and Drawer.

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 />);

An action stays in the bar at every breakpoint.

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 />);