Prototype Library

Nav Dropdown

An Icon Link trigger paired with a floating panel via a native <details> disclosure — zero runtime JS. The panel is slotted, so it holds any menu; the chevron rotates when open. Compose it inside an App Bar for chrome nav.

Inherited .astro import EsaNavDropdown from '@esa/ecology/esa-nav-dropdown.astro';

Preview (click to open)

Mitigation work
Mitigation work
  • Projects
  • Contracts
  • Portfolios
  • Work elements
Reporting
Reporting
  • Report Center
  • Maps
  • Publications
Angela Zhao
Account
  • Dashboard
  • Sign out
<EsaAppBar tone="brand" as="header">
  <EsaNavDropdown icon="trees" label="Mitigation work">
    <EsaLinkColumn heading="View all topics" links={[…]} />
  </EsaNavDropdown>
</EsaAppBar>

API

PropTypeDefaultDescription
label string required Trigger label.
icon string — Leading icon on the trigger.
size 'sm' | 'md' 'md' Trigger size (matches esa-icon-link).
align 'start' | 'end' 'start' Which edge of the trigger the panel aligns to.