SiteHeader

A website header in three layouts (simple, centered capsule, mega menu) that sticks to the top, turns solid once the page scrolls, glides an indicator to the current section and folds into a menu sheet on narrow containers.

When to use

• The top navigation of a marketing site, docs site or landing page.
• mega when sections have several destinations worth describing; simple or centered for five or fewer flat links.
• Not for the header of an app page with tabs and actions: use PageHeader.
• Not for in-page section tabs: use Tabs or SegmentedControl.

Usage

import { SiteHeader } from "@/components/iris/blocks/site-header/site-header";

h(SiteHeader, {
  variant: "mega",
  brand: { name: "Iris UI", href: "/", mark: h(MyLogo) }, // omit mark for a plain-type wordmark
  items: [
    {
      value: "library",
      label: "Library",
      links: [
        { label: "Components", description: "Inputs, overlays, charts and data display", href: "/components" },
        { label: "Blocks", description: "Headers, heroes, pricing and footers", href: "/components#blocks" },
      ],
      feature: { title: "Brand book", description: "Principles, colour, type and motion.", href: "/brand" },
    },
    { value: "registry", label: "Registry", href: "/r/registry.json" },
  ],
  defaultCurrent: "library",
  secondaryAction: { label: "Install", href: "/components#install" },
  primaryAction: { label: "Browse components", href: "/components" },
});

Props

Prop	Type	Default	Description
variant	"simple" | "centered" | "mega"	"mega"	simple puts links beside the brand, centered centers them in a capsule, mega opens panels for items with links.
brand	{ name, href?, mark? }	{ name: "Iris UI" }	Brand link. Without mark the name is set in plain type; pass mark (a ReactNode) to put a logo before it.
items	SiteHeaderItem[]	siteHeaderExampleItems (Iris UI's library and guides)	{ value, label, href?, links?, feature? }. links are { label, description?, icon?, href? }; feature is a card { title, description?, href?, image? }.
current / defaultCurrent	string	none	Value of the item that holds the current page (controlled / uncontrolled).
onCurrentChange	(value) => void	none	Called when a destination inside an item is chosen.
onNavigate	(destination) => void	none	Called for every destination: items, panel links, the brand and actions with an href.
secondaryAction	{ label, href?, onClick? } | null	{ label: "Install" }	Quiet action before the primary one. null hides it.
primaryAction	{ label, href?, onClick? } | null	{ label: "Browse components" }	The one primary action. null hides it.
sticky	boolean	true	Sticks to the top of its scroll container.
scrollContainer	RefObject<HTMLElement>	window	The element that scrolls, when it is not the window.
scrollThreshold	number	8	Pixels of scroll before the background turns solid.
label	string	"Main"	Accessible name of the navigation landmark.
className	string	none	Extra classes on the header.

Notes

• The defaults describe Iris UI's own site: an "Iris UI" plain-type wordmark, Library and Guides panels, and Install and Browse components actions. Pass your own brand, items and actions for another site. The default Library panel's feature card uses a flat placeholder image; the preview's feature card has none.
• Destinations render as links when they have an href and as buttons otherwise.
• Mega panels open on hover (with a short intent delay) or click, slide in from the side you moved toward, and close on Escape or an outside press. Triggers carry aria-expanded.
• Below 760 px of container width the links fold into a menu button that opens a sheet; groups expand inline.
• The preview opens the Library panel once on load so the mega menu is visible.
• Hover and press colours are Tailwind utilities on theme tokens (ink, ink-2, hover, line, accent); the header turns bg-page with shadow-resting once scrolled.
• Reduced motion swaps the slides and springs for fades.