Header Nav

Preview

Open Reports or the avatar to expand the native disclosures.

<EsaHeaderNav items={items} user={user}>
  <strong slot="brand">ESA</strong>
</EsaHeaderNav>

States

Brand only, no signed-in user — the avatar / user menu is omitted when user is absent.

<EsaHeaderNav items={items}>
  <strong slot="brand">Beacon</strong>
</EsaHeaderNav>

API

Slots

Nav dropdowns and the user menu are native details/summary disclosures (via esa-nav-dropdown) — no JavaScript required.

Accessibility

• Each item with children renders an esa-nav-dropdown disclosure; plain items render an esa-icon-link.
• Disclosures are native details/summary — keyboard toggling and the expanded state come for free.
• The avatar button carries an aria-label naming the user (User menu for …).
• Decorative chevrons and glyph SVGs are aria-hidden.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.