Site header
Sticky site header: logo link, end-aligned primary nav with optional mega-menu disclosures, optional CTA, a trailing actions slot (e.g. cart) that stays visible on phones, and a mobile trigger that opens an accessible drawer (focus-trapped dialog with overlay). Shrinks on scroll past 80px.
Experimental · Organism
Example
Open the standalone example. Static HTML rendered from the Default Storybook story, with generated tokens and the component's own CSS.
When to use
Top-level navigation for any marketing site or storefront that needs one responsive row of navigation, optional product/collection mega-menus, site-wide actions and a phone drawer.
Not for: In-app/admin chrome with persistent sidebars, in-page section switching (tabs), or multi-row navigation.
Parameters
| Name | Type | Required | Default |
|---|---|---|---|
logo | ReactNode | Yes | — |
navLinks | (NavLink | { label: string; menu: MegaMenuGroup[] })[] | Yes | — |
cta | { label: string; href: string } | No | — |
actions | ReactNode | No | — |
homeHref | string | No | "/" |
navLabel | string | No | "Main" |
collapseOnScroll | boolean | No | true |
linkComponent | ElementType | No | "a" |
Tokens and dependencies
Tokens: color-bg-header, color-bg-card, color-text, color-menu-heading, color-menu-link-emphasis, color-menu-heading-rule, color-text-secondary, color-border, color-border-subtle, color-cta, color-cta-hover, color-on-cta, color-focus-ring, overlay-backdrop, z-modal, shadow-lg, header-h-expanded, header-h-collapsed, container-max, container-padding, control-height-lg, spacing-0, spacing-1, spacing-2, spacing-3, spacing-4, spacing-5, spacing-6, spacing-8, spacing-24, border-width, radius-md, focus-width, focus-offset, font-primary, text-xs, text-sm, text-base, text-lg, weight-medium, weight-semibold, weight-bold, leading-snug, leading-normal, text-menu-heading, tracking-menu-heading, menu-heading-case, menu-heading-rule, menu-heading-rule-gap, transition-fast.
Builds on: site-footer, button, sheet, status-pill.
Source
Canonical contract: components/site-header/SPEC.md. React binding: components/site-header/react/Header.tsx. Liquid binding: components/site-header/liquid/header.liquid. Css binding: components/site-header/site-header.css.