Site header
A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.
pnpm dlx shadcn@latest add @uiarc/site-headerLive block · sample data
- 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.
- 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.
Installation
Add Site header with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/site-headerAdds the block and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this as a starting point and replace the sample data with your own.
example.tsx
import { SiteHeader } from "@/registry/blocks/site-header/site-header"; export function MarketingHeader() { return ( <SiteHeader variant="simple" brand={{ name: "Acme", href: "/", mark: <Logo /> }} items={[ { value: "product", label: "Product", href: "/product" }, { value: "pricing", label: "Pricing", href: "/pricing" }, { value: "docs", label: "Docs", href: "/docs" }, ]} current="pricing" secondaryAction={{ label: "Sign in", href: "/sign-in" }} primaryAction={{ label: "Start free", href: "/sign-up" }} /> );}Built fromMotion
API reference
2 parts. The first is the root.
SiteHeader
A marketing site header in three variants. It turns solid once the page scrolls, and on narrow containers the links move into a sheet.
PropTypeDefaultDescription
variant"simple" | "centered" | "mega""mega"`simple` puts links beside the brand, `centered` centers them in a quiet capsule, `mega` opens panels for items with links.brand{ name: string; href?: string; mark?: ReactNode }{ name: "Arc" }Brand at the start of the bar.itemsSiteHeaderItem[]siteHeaderExampleItemsTop level destinations: { value, label, href?, links?, feature? }. Items with links open a panel in the mega variant.currentstring–Value of the item that holds the current page (controlled).defaultCurrentstring–Initial current item when uncontrolled.onCurrentChange(value: string) => void–Called when a destination inside an item is chosen, with that item's value.onNavigate(destination: { label: string; href?: string; section?: string }) => void–Called for every destination: items, panel links, the brand, and actions with an href.secondaryAction{ label: string; href?: string; onClick?: () => void } | null{ label: "Sign in" }A quiet action before the primary one. Pass null to hide it.primaryAction{ label: string; href?: string; onClick?: () => void } | null{ label: "Get Arc" }The one primary action. Pass null to hide it.stickybooleantrueSticks to the top of its scroll container.scrollContainerRefObject<HTMLElement | null>–The element that scrolls, when it is not the window.scrollThresholdnumber8Pixels of scroll before the background turns solid.labelstring–Accessible name of the navigation landmark.classNamestring–Extra class on the header.SiteHeaderBlock
Default export: a preview with a variant switcher over a small scrolling page.
PropTypeDefaultDescription
variantSiteHeaderVariant"mega"Initial variant.- ArrowLeftorArrowRight
- Move between top level items in the mega variant.
- ArrowDown
- On an item with links, opens its panel and focuses the first link.
- ArrowUporArrowDownorHomeorEnd
- Move between links inside an open panel.
- Escape
- Closes the open panel or the mobile sheet and returns focus to its trigger.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.