Prototype Library

Dropdown Menu

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.
Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

  • (menu-action)="onMenuAction($event.detail)"

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.