# Site Header

- Page: <https://kznlabs.github.io/labsUI/components/site-header>

## Site Header (`site-header`, block)

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.

- Install: `npx @kznlabs/labsui add site-header`
- Docs: <https://kznlabs.github.io/labsUI/components/site-header>
- Brings: button, button-variants, dialog, drawer, navigation-menu, platform, use-controllable-state, use-disclosure, use-dismiss, use-indicator, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<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"`.
  - `label?: string` = `"Main"`: 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.

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

### Usage

```tsx
<SiteHeader brand={<a href="/">Acme</a>} current="/blog" nav={[{ label: "Products", items: [{ title: "Bot", href: "/bot", icon: <Bot /> }] }, { label: "Blog", href: "/blog" }]} actions={<ThemeToggle />} />
```

### Example: header.tsx

```tsx
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>
        </>
      }
    />
  );
}
```