Header
Brand, primary nav, disclosure sub-menus, locale switcher.
Site chrome: the brand wordmark (the Logo primitive, filled withcurrentColor) plus the primary nav. Sub-menus use the W3C APG disclosure pattern — a <button aria-expanded> toggling a sibling list — which is keyboard-operable, Escape-to-close and axe-clean (ADR 0006, 0007).
Open a sub-menu, then press Escape or click outside. Resize below 48rem to collapse the nav behind the menu toggle. These disclosures are scripted, so unlike the FAQ accordion they carry the swap-safe burden (ADR 0017): they re-init on astro:page-load and register their document listeners once.
The site header
Props
| Prop | Type | Required |
|---|---|---|
| brand | { label: string; href: string } | yes |
| items | NavItem[] | yes |
| locales | { code: string; label: string; href: string }[] | — |
| currentLocale | string | — |
| navLabel | string | — |
| menuLabel | string | — |
| languageLabel Label on the locale disclosure button (e.g. "Language"/"Kieli"); the open menu marks the active locale, so the button names the choice, not the current value. | string | — |
| themeToggleLabel Accessible name for the light/dark toggle button beside the locale picker. Names the setting ("Dark mode"); aria-pressed carries the on/off state. | string | — |
| Field | Type | Required |
|---|---|---|
| label | string | yes |
| href | string | yes |
| children | { label: string; href: string }[] | — |