Site header

The bar at the top of a site. Logo, links, a button if you need one.

Also known as masthead, nav bar.

Variants

default

Static height. No scroll reaction. Simple border bottom.

shrink

Reduces height on scroll. Brand scales down. Background blurs to frosted glass. Subtle shadow appears.

How it works

Sticky. Opens at full height showing the brand and navigation prominently. On scroll, the header shrinks — height reduces, brand scales down, and the background gains a frosted-glass blur. Remains visible throughout the page. On mobile, navigation collapses into a hamburger that opens a full-width drawer.

Relationships

↔ os-003 Footer

Parameters

Name	Type	Default	Description
`brand`	string	—	Brand text or logo
`brandHref`	string	`/`	Brand link destination
`links`	array	`[]`	Navigation items: `{label, href}`
`cta`	string	—	CTA button label (omit to hide)
`ctaHref`	string	—	CTA link destination
`variant`	string	`shrink`	`default` \| `shrink`
`className`	string	`""`	Additional CSS classes

Tokens

--color-bg --color-border-subtle --color-text --color-text-secondary --font-primary --weight-bold --weight-medium --spacing-6 --spacing-8 --container-max --text-sm --text-xl

Code

os-001 · Source: components/Nav.jsx ▾

<Nav
  brand="MabV"
  brandHref="/"
  links={[
    { label: 'Our Science', href: '#science' },
    { label: 'Pipeline', href: '#pipeline' },
    { label: 'About', href: '#about' },
    { label: 'Contact', href: '#contact' },
  ]}
  cta="Request Information"
  ctaHref="#contact"
  variant="shrink"
/>