Prototype Library

Dropdown

Click-toggled menu. The trigger is slotted and items are set via the items property. Selecting emits a menu-action event; outside-click and Esc close it.

Inherited wc import '@esa/ecology/esa-dropdown-menu';

Preview

Items are set in a script: el.items = [{ label: "Edit", action: "edit" }, …].

<esa-dropdown-menu id="dd-start" position="below-start">
  <button>Actions ▾</button>
</esa-dropdown-menu>

Positions

<esa-dropdown-menu position="below-start">…</esa-dropdown-menu>
<esa-dropdown-menu position="below-end">…</esa-dropdown-menu>

API

PropTypeDefaultDescription
items EsaMenuItem[] [] Menu items, set as a property. Each: { label, icon?, action?, disabled?, divider?, variant? }.
position 'below-start' | 'below-end' | 'above-start' | 'above-end' 'below-start' Corner the panel anchors to.
width 'auto' | 'trigger' 'auto' 'trigger' matches the panel min-width to the trigger.
open boolean false Reflected open state.

Methods

PropTypeDefaultDescription
close() method — Closes the menu programmatically.

Events

EventTypeDefaultDescription
menu-action CustomEvent<string> — Fired when a non-disabled item with an action is selected; detail is the item's action string.

Accessibility

  • The panel is role="menu" and each item is role="menuitem"; dividers are role="separator".
  • Disabled items set the native disabled attribute and are skipped on activation.
  • Escape and any outside click close the menu.

Tokens

  • --color-surface-elevated · --color-border / --color-border-light
  • --color-text-primary · --color-danger / --color-danger-subtle (danger items)
  • --shadow-300 · --z-dropdown
  • --radius-200 · --spacing-100 – --spacing-300 · --focus-ring-*