SiteHeader

A responsive header component with navigation, mobile menu, and customizable actions.

Installation

pnpm add @corew500/ui

Usage

import { SiteHeader } from "@corew500/ui/site-header"

<SiteHeader
  logo={<Logo />}
  navigation={[
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "Contact", href: "/contact" },
  ]}
/>

With Actions

Add buttons or other actions to the right side.

<SiteHeader
  logo={<Logo />}
  navigation={navItems}
  actions={
    <>
      <Button variant="ghost">Sign In</Button>
      <Button>Get Started</Button>
    </>
  }
/>

Dropdown Navigation

Create nested navigation with dropdowns.

const navigation = [
  { label: "Home", href: "/" },
  {
    label: "Products",
    href: "/products",
    children: [
      { label: "SaaS", href: "/products/saas", description: "Cloud solutions" },
      { label: "Mobile", href: "/products/mobile", description: "Mobile apps" },
    ],
  },
  { label: "Pricing", href: "/pricing" },
]

<SiteHeader logo={<Logo />} navigation={navigation} />

Variants

{/* Default: Blurred background */}
<SiteHeader variant="default" />

{/* Solid: Opaque background */}
<SiteHeader variant="solid" />

{/* Transparent: No background */}
<SiteHeader variant="transparent" />

Sticky Header

Make the header stick to the top on scroll.

<SiteHeader sticky logo={<Logo />} navigation={navItems} />

With Next.js Link

Use Next.js Link component for navigation.

import Link from "next/link"

<SiteHeader
  logo={<Logo />}
  navigation={navItems}
  linkComponent={Link}
/>

Custom Mobile Menu

Provide custom mobile menu content.

<SiteHeader
  logo={<Logo />}
  navigation={navItems}
  mobileMenuContent={
    <Stack spacing={4}>
      <Button fullWidth>Sign In</Button>
      <Button fullWidth variant="outline">
        Sign Up
      </Button>
    </Stack>
  }
/>

Complete Example

import { SiteHeader } from "@corew500/ui/site-header"
import { Button } from "@corew500/ui/button"
import Link from "next/link"

const navigation = [
  { label: "Home", href: "/" },
  {
    label: "Products",
    href: "/products",
    children: [
      { label: "Platform", href: "/platform" },
      { label: "Integrations", href: "/integrations" },
      { label: "API", href: "/api" },
    ],
  },
  { label: "Pricing", href: "/pricing" },
  { label: "Docs", href: "/docs" },
]

export function Header() {
  return (
    <SiteHeader
      sticky
      logo={<Logo />}
      logoHref="/"
      navigation={navigation}
      linkComponent={Link}
      actions={
        <>
          <Button variant="ghost">Sign In</Button>
          <Button>Get Started</Button>
        </>
      }
    />
  )
}

API Reference

Props

Prop	Type	Default	Description
`logo`	enum	—	Logo element or component
`logoHref`	string	`/`	URL for logo link (defaults to "/")
`navigation`	NavItem[]	`[]`	Navigation items
`actions`	enum	—	Actions to show on the right side (buttons, etc.)
`mobileMenuContent`	enum	—	Custom content for mobile menu (replaces default nav rendering)
`sticky`	enum	`false`	Make header sticky
`fullWidth`	enum	`false`	Use full viewport width instead of container max-width
`linkComponent`	enum	`a`	Link component to use for navigation (defaults to anchor)
`variant`	enum	—	—

Accessibility

Keyboard Navigation

Keyboard accessible navigation and menu toggle

Screen Readers

Mobile menu button has aria-label and aria-expanded
Menu icons use aria-hidden="true"
Sheet has sr-only title and description for screen readers

Additional

- Uses semantic <header> element
Navigation uses proper list and link semantics

Localization

Translatable Content

- All text content flows through navigation prop
NavItem labels and descriptions should be pre-translated
Mobile menu button labels are hardcoded ("Open menu"/"Close menu")

Related Components

SiteHeaderProps NavItem SiteFooter