ActionMenu

An ActionMenu contains a set of items, where each item represents an action or navigation to another page. ActionMenus are invoked by clicking on an icon.


The ActionMenu icon can be specified with the trigger slot. The slot itself has an icon attribute and text may be provided within the slot itself.

The default icon is dots-three-vertical.


Accessible naming

The trigger button requires a meaningful accessible name for screen readers.

  • label (optional) — A descriptive string used as aria-label on the trigger button. E.g., "Actions for Grand Hotel", "Change chat status", "More actions". When omitted, the id is used as aria-label (not recommended for new usage).

  • aria_labelledby (optional) — The ID of an element whose visible text becomes the accessible name via aria-labelledby. Takes precedence over label when provided. Use this in table rows where the row’s name cell can serve as the label. When aria_labelledby is set, aria-label is omitted from the trigger.

JS Commands

DesignSystem.toggle_disclosure/2

Shows or hides the ActionMenu when the appropriate icon is clicked.

DesignSystem.hide_disclosure/2

Hides the ActionMenu upon a phx-click-away from the appropriate icon.