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.
Preview (click to open)
<EsaAppBar tone="brand" as="header">
<EsaNavDropdown icon="trees" label="Mitigation work">
<EsaLinkColumn heading="View all topics" links={[…]} />
</EsaNavDropdown>
</EsaAppBar>API
| Prop | Type | Default | Description |
|---|---|---|---|
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. |
Theming surface
Every public token this component reads, extracted from its source at build time,
split by blast radius: the hooks that belong to this component,
then the shared and system tokens it consumes alongside everything else. 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.
Type roles it names
This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.
| Role | Re-point | Reach |
|---|---|---|
.typography-body-md |
| +28 more componentsesa-app-shell, esa-breadcrumbs, esa-card, esa-checkbox, esa-checkbox-group, esa-collapsible, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-container, esa-danger-zone, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-form-field, esa-header-nav, esa-input-tag, esa-page-header, esa-popover, esa-progress-bar, esa-radio-group, esa-select, esa-side-dialog, esa-snackbar-item, esa-switch-toggle, esa-tab-layout, esa-textarea |
Wired to this component
No other component reads these — re-point them and esa-nav-dropdown is the
only thing that moves.
| Token | Tier | Resolves to |
|---|---|---|
--nav-dropdown-panel-min-width | component | 240px |
Shared tokens it reads
Owned by a family or by the semantic layer. Still overridable — but scope the
override (esa-foo { --form-border-color: … }) unless you mean to move
everything that reads it. Reach says what else that is.
| Token | Reach | Resolves to |
|---|---|---|
--border-width-default | semantic every component | 1px via --border-width-100 |
--color-background-elevation-raised | semantic every component | #fcfcfc via --color-gray-1 |
--color-border-default | semantic every component | one role per property, so a theme can move the ring's weight and its colour independently. Tier 3's --focus-ring-width now reads this instead of holding a bare 2px, which is the same shape --focus-ring-color has always had (a thin tier-3 alias over a tier-2 role) — width was simply never given the tier-2 half.
*
* This role was rejected once, and the rejection is worth recording because its PREMISE was wrong rather than its reasoning. The argument against an `emphasis` width was that every 2px border in the kit is micro-geometry — spinner rings, the kbd keycap lip, a chevron. The focus ring was not in that enumeration and does not fit it: 33 components render it, more than read any other tier-3 token, and it is not micro-geometry but an accessibility affordance whose weight is a legitimate brand axis (a spoke that needs a heavier ring for contrast has to be able to reach it). It is also not a `border` in any component — every consumer paints it with `outline` or `box-shadow` — which is precisely why a survey of BORDERS missed it. The name still says `border` because tier 2 already calls the ring's colour --color-border-default-focus |
--color-content-default | semantic every component | #202020 via --color-gray-12 |
--elevation-4 | semantic every component | 0 via --shadow-offset-x |
--radius-md | semantic every component | 0.5rem via --radius-200 |
--z-dropdown | semantic every component | 50 |
--spacing-200 | primitive every component | 0.5rem |
--spacing-300 | primitive every component | 0.75rem |