Function: ActionMenu()

ActionMenu<T>(__namedParameters): Element

Defined in: composites/ActionMenu/ActionMenu.tsx:127

An overflow menu: a utility trigger that reveals additional actions.

Composes MenuTrigger + an icon-only ActionButton + Menu — the pattern behind a table row's trailing "…", a card's corner menu, and the tail of a toolbar that ran out of room. Reach for it whenever actions exist but do not deserve permanent space.

Why it is a component rather than a documented composition: the affordance is a convention. The glyph must be the overflow glyph (action.more), the trigger must be the utility silhouette's icon-only square, and the trigger must carry an accessible name. Left to each call site, all three drift — the same reason ButtonGroup fixes the action row's rhythm instead of exposing it.

Entity = Action (the trigger); the surface keeps Menu's Overlay identity. The trigger renders data-scope="action-menu", so host CSS and tests can target an overflow trigger without matching every ActionButton.

This is a toolbar's overflow answer, not ButtonGroup's. A row of commands that does not fit collapses to a column; a bar of tools that does not fit moves its tail in here. Two different responses because a command row and a tool strip fail differently.

A destructive row is marked with consequence, which a confirm wrapper dispatches on and which carries no colour of its own. Do not reach for evaluation="negative" to warn: it fills the whole row red instead of tinting its ink, because the Action tree has no negative-ink rung yet (F-029).

Type Parameters

Type Parameter
T extends object

Parameters

Parameter	Type
__namedParameters	ActionMenuProps<T>

Returns

Element

Example

<ActionMenu aria-label={moreActionsLabel} onAction={onAction}>
  <MenuItem id="duplicate">Duplicate</MenuItem>
  <MenuItem id="archive">Archive</MenuItem>
  <MenuItem id="delete" consequence="destructive">Delete</MenuItem>
</ActionMenu>

// Anchored to the end of a row, so the surface does not hang off the edge
<ActionMenu aria-label={rowActionsLabel} placement="bottom end">…</ActionMenu>