Site Header

Sticky, translucent site header from one nav array: brand, NavigationMenu panels from md up, a right Drawer with the same links below it, and your actions on the right. The hairline underneath appears only once content scrolls beneath it.

npx @kznlabs/labsui add site-header

acme.gg

Acme

import { BookOpen, Gauge } from "lucide-react";import { SiteHeader } from "@/components/blocks/site-header";import { Button } from "@/components/ui/button";import { ThemeToggle } from "@/components/ui/theme-toggle";export function Header({ pathname }: { pathname: string }) {  return (    <SiteHeader      brand={<a href="/">Acme</a>}      current={pathname}      nav={[        {          label: "Product",          items: [            {              title: "Dashboard",              href: "/dashboard",              icon: <Gauge />,              description: "Usage at a glance",            },            {              title: "Docs",              href: "/docs",              icon: <BookOpen />,              description: "Guides and API reference",            },          ],        },        { label: "Blog", href: "/blog" },        { label: "Pricing", href: "/pricing" },      ]}      actions={        <>          <ThemeToggle />          <Button size="sm">Sign in</Button>        </>      }    />  );}

<SiteHeader>

Sticky site header: brand, NavigationMenu from md up, a right Drawer with the same links below it. The hairline under it appears only once the page scrolls under the header.

brand*
ReactNode
Logo link, e.g. <a href="/">Acme</a>.
nav*
(SiteGroup | SiteLink)[]
Top-level links and panels, left to right.
actions
ReactNode
Right-hand controls (search, theme, sign in). Shown at every width.
current
string
Href of the current page: marks the matching link aria-current="page".
labeldefault "Main"
string
Accessible name of the navigation, desktop and drawer alike.
onNavigate
(href: string, event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onClick for every nav link, e.g. to close over client routing or stub links in a demo.

Prop	Type	Default
`brand*` Logo link, e.g. `<a href="/">Acme</a>`.	`ReactNode`	—
`nav*` Top-level links and panels, left to right.	`(SiteGroup \| SiteLink)[]`	—
`actions` Right-hand controls (search, theme, sign in). Shown at every width.	`ReactNode`	—
`current` Href of the current page: marks the matching link `aria-current="page"`.	`string`	—
`label` Accessible name of the navigation, desktop and drawer alike.	`string`	`"Main"`
`onNavigate` `onClick` for every nav link, e.g. to close over client routing or stub links in a demo.	`(href: string, event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void`	—

type SiteLink: { label: string; href: string }
type SiteGroup: { label: string; items: { title: string; href: string; description?: ReactNode; icon?: ReactNode }[]; columns?: 1 | 2; }

* required. Every component also takes className.