Prototype Library

Header Nav

A batteries-included top app bar composed from the chrome bricks (esa-app-bar + esa-icon-link + esa-nav-dropdown): brand slot, data-driven primary nav with dropdowns, an actions slot, and a user menu. Disclosures are native details/summary, so it needs zero runtime JS. For full control, compose the bricks directly.

Inherited .astro import EsaHeaderNav from '@esa/ecology/esa-header-nav.astro';

Preview

Open Reports or the avatar to expand the native disclosures.

ESA
JR 
<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

PropTypeDefaultDescription
items EsaHeaderNavItem[] [] Primary nav links. Each is { label; href?; icon?; children? }; an item with children renders a dropdown.
user EsaHeaderNavUser — Optional signed-in user { name; email?; avatarUrl?; initials? }. When present, renders the avatar + user menu.
navLabel string 'Main' Accessible name for the navigation landmark around the links. The links now sit in a real <nav> inside the banner; before 2026-08-18 they were loose in the header and the primary site navigation was not a landmark at all.

Slots

PropTypeDefaultDescription
brand slot — Left-aligned logo / wordmark area.
actions slot — Right-aligned controls placed before the user menu (e.g. search, notifications).

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.