Action Menu

Renders an action_menu component

Read more Read less
<.action_menu id="my-menu">
  <:item click={JS.navigate(~p"/foos/1/edit")}>Item 1</:item>
</.action_menu>

When no label is provided, the id is used as aria-label on the trigger button. For a meaningful accessible name, pass label:

<.action_menu id="my-menu" label="Actions">
  <:item click={JS.navigate(~p"/foos/1/edit")}>Item 1</:item>
</.action_menu>
Attribute Type Documentation Default Value
Required id * :string
label :string

Accessible name for the trigger button. Used as aria-label unless aria_labelledby is provided. Falls back to @id when neither label nor aria_labelledby is set.

aria_labelledby :string

ID of an element whose text becomes the accessible name via aria-labelledby. Takes precedence over label.

menu_placement :string "left"
title :string

Displays a title at the top of the list. Should not be used with info

show_border_for_trigger :boolean

Displays border around trigger. Should be false when used with trigger slot

false
disabled :boolean false
rest :global
Required item * :slot

The members of the action menu.

Show slot attributes Hide slot attributes
on_click %JS{}
href :string
icon :string
disabled :boolean
rest :map
<:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Item 1</:item>
trigger :slot

An alternate menu trigger. Default is vertical three-dot icon.

Show slot attributes Hide slot attributes
icon :string

An icon name (see Icon component).

info :slot

Content to render in the menu above the content. It is not considered a menu item.

Should not be used with title.

<:info>Slot for anything.</:info>
tooltip :slot

Tooltip to be shown on hover on action menu trigger