Navigation

Nav .

Barra sticky com CTA persistente e sheet de menu; IA plana, sem dropdowns.

Nav · showcase

Sticky bar — one DOM, three responsive states, breakpoint 900px. The CTA pill persists at every width. Active link gets a 2px --text-accent underline above 900px. Burger opens a sheet (56px rows) below the bar on narrow viewports. Resize across 900px to see all states on the main showcase page.

Props contract

links: { href: string; label: string }[]
current?: string   — href of the active page
ctaLabel?: string  — CTA pill label
ctaHref?: string   — CTA pill destination
class?: string     — extra classes on <header>

Verification checklist

Bar stays stuck to top on scroll (position:sticky)
CTA pill visible at all viewport widths — never hides
Below 900px: burger 46×46, opens 56px-row sheet below bar
Escape closes sheet, focus returns to burger
Click outside sheet closes it
Above 900px: inline links (17px/w500/32px gaps), burger gone, sheet gone
Active link has 2px green underline (aria-current="page")
Zero raw hex — color-mix(var(--surface) 92%) for bar bg
No dropdowns at any width

Usage example

<Nav
  links={[
    { href: '/', label: 'Home' },
    { href: '#units', label: 'Units' },
    { href: '#plans', label: 'Plans' },
    { href: '#about', label: 'About' },
  ]}
  current="/"
  ctaLabel="CTA pill"
  ctaHref="#nav-cta-anchor"
/>