Loading…

Site header

Block

A whole site header from one list: menus with a featured card on desktop, the same links grouped in the mobile menu.

Headers
3 components
1 file

Acme

Hover or focus Product for the menu; narrow the window for the mobile list.

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add site-header

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { SiteHeaderBlock } from "@/components/blocks/site-header"; export default function Page() {  return <SiteHeaderBlock />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<SiteHeaderBlock>

Prop	Type	Default
`brand` The brand: a logo and name.	`ReactNode`	`( <> <span aria-hidden="true" className="size-6 rounded-lg bg-primary" /> Acme </> )`
`brandHref`	`string`	`"/"`
`cta` The call to action. `null` hides it.	`{ label: string; href: string } \| null`	`{ label: "Get started", href: "#" }`
`items`	`SiteHeaderItem[]`	`DEFAULT_ITEMS`
`signIn` The quiet action, e.g. sign in. `null` hides it.	`{ label: string; href: string } \| null`	`{ label: "Sign in", href: "#" }`
`skipTo` Where the skip link goes. `null` leaves it out.	`string \| null`	`"#content"`

Accessibility

Built on navbar (skip link, a mobile disclosure with Escape and focus return, never hidden while focused) and navigation-menu (arrow keys along the bar, Escape to close, focus back to the trigger). The desktop and mobile navigations are separate landmarks with their own names, driven by the same list so they always agree. Mobile groups are lists named by their headings.