Site header

A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.

Preview

Live · keyboard ready

When to use

The top bar of a marketing site, landing page, or docs site.
Product sites with grouped destinations that deserve a mega menu with a feature card.
Pages that need one clear sign-up action in the header.

When not to use

Use workspace-sidebar or sidebar-rail inside a signed-in app.
Use morph-nav for a single-surface animated navigation with built-in search.
Use menubar for application commands.

shadcn CLI

Also installs (2)

manicat-foundation
segmented-control

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "site-header",
  "type": "registry:block",
  "title": "Site header",
  "description": "A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/segmented-control.json"
  ],
  "files": [
    {
      "path": "registry/blocks/site-header/site-header.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/site-header/site-header.tsx"
    },
    {
      "path": "registry/blocks/site-header/site-header.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/site-header/site-header.module.css"
    },
    {
      "path": "lib/media.ts",
      "type": "registry:lib",
      "target": "@components/manicat/lib/media.ts"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.tsx",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.tsx"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.module.css",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/site-header",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/site-header",
    "markdown": "https://uiarc.dev/components/blocks/site-header/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { SiteHeader } from "manicat/registry/blocks/site-header/site-header";

export function SiteHeaderExample() {
  // The header is its own size container, which has no width of its own: give it the whole row.
  return <div className="w-full"><SiteHeader /></div>;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Marketing header A simple header with brand, links and two actions.

Live · keyboard ready

marketing-header-a-simple-header-with-brand-links-and-two-actions-.tsxtsx

"use client";

import { SiteHeader } from "manicat/registry/blocks/site-header/site-header";

export function SiteHeaderMarketingExample() {
  return (
    <SiteHeader
      variant="simple"
      brand={{ name: "Acme" }}
      items={[
        { value: "product", label: "Product", href: "/product" },
        { value: "pricing", label: "Pricing", href: "/pricing" },
        { value: "docs", label: "Docs", href: "/docs" },
      ]}
      defaultCurrent="product"
      secondaryAction={{ label: "Sign in", href: "/sign-in" }}
      primaryAction={{ label: "Get started", href: "/signup" }}
    />
  );
}

Keyboard interactions

Keys	Action
ArrowLeft / ArrowRight	Move between top level items in the mega variant.
ArrowDown	On an item with links, opens its panel and focuses the first link.
ArrowUp / ArrowDown / Home / End	Move between links inside an open panel.
Escape	Closes the open panel or the mobile sheet and returns focus to its trigger.

Accessibility

A labelled nav landmark; the current item is marked with aria-current.
Panel triggers expose aria-expanded; outside presses and Escape close whichever layer is open.
The mobile sheet locks page scroll while open and returns focus to the menu button when closed.

Motion

Mega panels open on hover after a short intent delay and close after a leave grace; switching items morphs the panel to the new content.
The header background turns solid past scrollThreshold.
Reduced motion removes panel travel and uses fades.

Responsive behavior

It is a container-query component: below 760px of its own width the links, panels, and wide actions hide and a menu button opens a sheet.
From 760px the sheet and scrim are removed; widening the container closes an open sheet.
Hover-to-open panels only apply to fine pointers.

Performance

Panels mount only while open; the scroll listener updates a single solid-state attribute.
Feature images use next/image with sizes set, so they load only when a panel opens.

Notes for AI

Choose it for marketing and docs sites. For in-app navigation use workspace-sidebar or sidebar-rail.
The defaults are Arc sample content; always pass brand, items, and actions for real sites.
Links render as anchors when an href is set; wire onNavigate for client-side routing or analytics.
The mega variant uses next/image for feature images; allow their host in your image config.