Action Menu
import "@taprootio/espalier/action-menu";
<esp-action-menu>
A contextual overflow menu that combines a trigger button, popover positioning, menu semantics, and roving focus for row and card actions.
The default trigger is an icon-only esp-button
showing an ellipsis. Use the trigger slot when a view needs a
different affordance, such as the square dropdown action used in
Taproot grids.
Use icon-position="right" for Taproot-style action menus with
trailing icons in a differentiated cell:
Slots
<esp-action-menu> has the following slots:
Default
Place esp-action-menu-item children here.
trigger
Optional custom trigger element.
Attributes
<esp-action-menu> has the following attributes:
placement
placement has a default value of "bottom-end".
Preferred popover placement. Values map to the underlying
esp-popover side and alignment settings.
disabled
disabled has a default value of false.
Prevents the trigger from opening the menu.
icon-position
icon-position has a default value of "left".
Controls where item icons appear inside the menu.
"left" keeps icons before labels. "right" moves icons into
a trailing cell with a differentiated background and dotted divider.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-action-menu> has the following methods:
openMenu
Opens the action menu popover when the trigger is enabled.
closeMenu
Closes the action menu popover.
Set restoreFocus to return keyboard focus to the trigger.
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-action-menu> emits the following events:
esp-action-menu-select
esp-action-menu-select is of type CustomEvent<ActionMenuSelectDetail>.
Emitted from the menu when an enabled item is activated.
CSS Properties
<esp-action-menu> has the following CSS properties:
--esp-action-menu-background
Menu surface background. Defaults to var(--esp-color-layer-1).
--esp-action-menu-border
Menu border. Defaults to 1px solid var(--esp-color-border).
--esp-action-menu-shadow
Menu shadow. Defaults to 2px 2px 4px var(--esp-color-shadow).
--esp-action-menu-min-width
Minimum menu width. Defaults to 12rem.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).