Beacon / Navigation / Dropdown 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" }, …].
Show code Copy
< esa-dropdown-menu id = " dd-start " position = " below-start " > < button > Actions ▾ </ button > </ esa-dropdown-menu > Positions below-end ▾
Show code Copy
< esa-dropdown-menu position = " below-start " > … </ esa-dropdown-menu > < esa-dropdown-menu position = " below-end " > … </ esa-dropdown-menu > API Prop Type Default Description itemsEsaMenuItem[][]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. openbooleanfalseReflected open state.
Methods Prop Type Default Description close()method— Closes the menu programmatically.
Events Event Type Default Description menu-actionCustomEvent<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-background-elevation-floating · --color-border-default / --color-border-default-subtle--color-content-default · --color-background-utility-danger / --color-background-utility-danger-subtle (danger items)--elevation-4 · --z-dropdown--radius-200 · --spacing-100 – --spacing-300 · --focus-ring-*