GitHub

Nav Dropdown

An Icon Link trigger paired with a floating panel via a native

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.

Stable .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 — 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.

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.

TokenTierResolves to
--nav-dropdown-panel-bg component #fcfcfc via --color-surface → --color-gray-1
--nav-dropdown-panel-border-color component #cecece via --color-border → --color-gray-7
--nav-dropdown-panel-min-width component 240px
--nav-dropdown-panel-padding component 0.75rem via --spacing-300
--nav-dropdown-panel-radius component 0.5rem via --radius-200
--nav-dropdown-panel-text component #202020 via --color-text-primary → --color-gray-12
--shadow-200 primitive 0 4px 20px -4px rgba(0, 0, 0, 0.06)
--spacing-200 primitive 0.5rem
--z-dropdown primitive 50