Site Header

A composable site header that stays pinned to the top of the viewport with a blurred background. It constrains its content to the site's max-width while the header itself spans the full viewport, making it suitable for use as the primary navigation bar.

Anatomy

import {
  SiteHeader,
  SiteHeaderLogo,
  SiteHeaderNav,
  SiteHeaderNavLink,
  SiteHeaderActions,
  SiteHeaderSeparator,
  SiteHeaderMobileNav,
  SiteHeaderMobileNavLink,
} from "@/components/site-header"

<SiteHeader>
  <SiteHeaderMobileNav>
    <SiteHeaderMobileNavLink href="/docs">Docs</SiteHeaderMobileNavLink>
  </SiteHeaderMobileNav>

  <SiteHeaderLogo>Acme</SiteHeaderLogo>

  <SiteHeaderNav>
    <SiteHeaderNavLink href="/docs">Docs</SiteHeaderNavLink>
    <SiteHeaderNavLink href="/blog">Blog</SiteHeaderNavLink>
  </SiteHeaderNav>

  <SiteHeaderActions>
    {/* Search, theme toggle, etc. */}
  </SiteHeaderActions>
</SiteHeader>

Examples

Basic header

<SiteHeader>
  <SiteHeaderLogo>Acme</SiteHeaderLogo>
  <SiteHeaderNav>
    <SiteHeaderNavLink href="/docs">Docs</SiteHeaderNavLink>
  </SiteHeaderNav>
</SiteHeader>

With separator between nav groups

Use SiteHeaderSeparator to visually divide sections within the header.

<SiteHeader>
  <SiteHeaderLogo>Acme</SiteHeaderLogo>
  <SiteHeaderSeparator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
  <SiteHeaderNav>
    <SiteHeaderNavLink href="/docs">Docs</SiteHeaderNavLink>
    <SiteHeaderNavLink href="/blog">Blog</SiteHeaderNavLink>
  </SiteHeaderNav>
  <SiteHeaderActions>
    <Button variant="ghost" size="icon-sm">
      <SearchIcon />
    </Button>
  </SiteHeaderActions>
</SiteHeader>

Exact route matching

By default, SiteHeaderNavLink marks itself as active when the current path starts with the href. Pass exact to require an exact match — useful for a home link that shouldn't stay active on sub-pages.

<SiteHeaderNavLink href="/" exact>Home</SiteHeaderNavLink>
<SiteHeaderNavLink href="/docs">Docs</SiteHeaderNavLink>

SiteHeaderMobileNav renders a hamburger button (visible below md) that opens a slide-out sheet. Links inside automatically close the sheet on navigation.

<SiteHeader>
  <SiteHeaderMobileNav>
    <div className="flex flex-col gap-1 pt-6">
      <SiteHeaderMobileNavLink href="/docs">Docs</SiteHeaderMobileNavLink>
      <SiteHeaderMobileNavLink href="/blog">Blog</SiteHeaderMobileNavLink>
    </div>
  </SiteHeaderMobileNav>

  <SiteHeaderLogo>Acme</SiteHeaderLogo>

  <SiteHeaderNav>
    <SiteHeaderNavLink href="/docs">Docs</SiteHeaderNavLink>
    <SiteHeaderNavLink href="/blog">Blog</SiteHeaderNavLink>
  </SiteHeaderNav>
</SiteHeader>

API Reference

SiteHeader

The root wrapper. Renders a sticky <header> that spans the full viewport width. Content is constrained to --content-max-width via container-wrapper.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

SiteHeaderLogo

Renders a <Link> styled as the brand/logo area.

Prop	Type	Default
`href`	`string`	`"/"`
`className`	`string`	—
`children`	`ReactNode`	—

SiteHeaderNav

A <nav> element that is hidden below md and displayed as a horizontal flex row above it.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

SiteHeaderNavLink

A navigation link with automatic active state based on the current pathname.

Prop	Type	Default	Description
`href`	`string`	—	The route to link to.
`exact`	`boolean`	`false`	When `true`, the link is only active on an exact pathname match. By default it matches any path that starts with `href`.
`className`	`string`	—
`children`	`ReactNode`	—

SiteHeaderActions

A right-aligned container (ml-auto) for action items like search, theme toggles, or user menus.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

SiteHeaderSeparator

A re-export of the Separator component for convenience. Typically used with orientation="vertical".

SiteHeaderMobileNav

Renders a hamburger button that opens a Sheet from the left. The button is only visible below md. Links rendered inside automatically close the sheet when clicked.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

SiteHeaderMobileNavLink

A navigation link for use inside SiteHeaderMobileNav. Closes the mobile sheet on click and highlights the active route.

Prop	Type	Default	Description
`href`	`string`	—	The route to link to.
`exact`	`boolean`	`false`	When `true`, the link is only active on an exact pathname match.
`className`	`string`	—
`children`	`ReactNode`	—