Header

Pass items plus the logo and actions snippets. Header composes a Nav from those same items: horizontal in the bar, vertical in the mobile drawer. There is nothing for you to wrap.

// No need for a Home item — the logo is the link home.
const navItems: NavItem[] = [
	{
		// No href — the whole label is the dropdown trigger.
		label: 'Components',
		children: [
			{ label: 'Button', href: '#' },
			{ label: 'Card', href: '#' }
		]
	},
	{ label: 'Foundation', href: '#' },
	{ label: 'Media', href: '#' }
];

<Header items={navItems} bordered>
	{#snippet logo()}<Logo />{/snippet}
	{#snippet actions()}<Button size="sm">Sign in</Button>{/snippet}
</Header>

variant sets the bar surface; bordered adds a bottom hairline that composes with either. Each demo sits on a tinted backdrop that is not part of Header, so transparent has something to show through.

<Header items={navItems} />

<Header items={navItems} bordered />

<Header items={navItems} variant="transparent" bordered />

Drag under 968px and the bar collapses to the hamburger. actions stays in the collapsed bar, pinned to the end next to the hamburger; override margin-inline-start on .hz-header-actions to move it somewhere else. Open the drawer to see the vertical Nav with the actions repeated below it. The drawer traps focus, and Escape closes it.

mobileBreakpoint takes the named tiers ('sm' | 'md' | 'lg'), which are container queries against the header's own width and need no JavaScript. A px number measures that same width at runtime instead. Reach for a number once you have retuned --hz-width-*: a named tier cannot follow that override, because CSS cannot read a custom property inside a container query. Before hydration a number renders as its nearest named tier, so a page without JavaScript still collapses at a sensible width.

<!-- Below the breakpoint the bar hands over to a hamburger + drawer
     (a container query on the header width). The drawer holds a
     vertical Nav + the actions, and traps focus while open. -->
<Header items={navItems} mobileBreakpoint="md">
	{#snippet logo()}<Logo />{/snippet}
	{#snippet actions()}<Button size="sm">Sign in</Button>{/snippet}
</Header>

Two snippets restyle the header's icons. menuIcon replaces the hamburger in the collapsed bar. chevronIcon is forwarded to both Navs, so it replaces the dropdown chevron in the bar and the drawer alike. The theme rotates that chevron 180° while a menu is open, so pick one that reads both ways, like an arrow. Any of the shared icons works, as does any inline SVG; size and stroke are the icon's own props.

Drag under 968px to see the custom hamburger; widen for the bar chevron.

<Header items={navItems}>
	{#snippet logo()}<Logo />{/snippet}
	{#snippet menuIcon()}<IconGrip size={20} />{/snippet}
	{#snippet chevronIcon()}<IconArrowDown size={14} strokeWidth={1.5} />{/snippet}
</Header>