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 "@/components/arc/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.
Billing overviewProBlockA billing page where the plan card morphs into a picker and usage, invoices, and card follow.API keysProBlockAPI key management where Create key unfolds into its form and each secret is shown once.Team membersProBlockA members list where typed emails turn into chips and fly into pending invites as seats roll.