Consumer Overrides

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>

The action menu does not render when it has no items, including when all item slots are excluded by :if or :for.

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>

Overridden heading

<div id="consumer-overrides-single-action-menu-consumer-override">
  <style>
    .gc-action-menu-trigger { color: rgb(255, 0, 0); }
    .consumer-heading { color: rgb(0, 128, 0); }
  </style>
  <.action_menu id="consumer-overrides-single-action-menu">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>First</:item>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=baz")}>Second</:item>
  </.action_menu>
  <.h2 as="h4-desktop" variant="secondary" class="consumer-heading">
    Overridden heading
  </.h2>
</div>