Navbar

The site header: a responsive top navigation bar with a brand/logo slot, a cluster of nav links and dropdown menus, and a right-aligned actions slot. Below 1024px it collapses into a hamburger-driven drawer — the desktop links and the mobile toggle are mutually exclusive at a single breakpoint. The <nav> is a labelled landmark; the active link carries aria-current="page"; dropdowns follow the WAI-ARIA menu pattern with aria-expanded, click + hover open, and full keyboard support (Arrow / Home / End / Escape).

Full header — resize the window below 1024px to see it collapse

Controlled drawer (open + onOpenChange)

open = false

Dropdown menu — click or hover the trigger

Accessibility

  • <nav aria-label> exposes a labelled navigation landmark.
  • The active link uses aria-current="page", not color alone.
  • The hamburger is a real <button> with aria-expanded + aria-controls pointing at the drawer; it is hidden on desktop via a specific selector.
  • Dropdowns use aria-haspopup="menu", role="menu"/menuitem, roving focus, and close on outside click, blur, or Escape (returning focus to the trigger).
  • All focus rings use var(--focus) via :focus-visible.