GroupCollect 1.3.215
- 1.1.0

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>

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>
Menu (label omitted, falls back to id as aria-label) Open in playground 
<div id="action-menu-single-basic-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-basic">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Does not navigate</:item>
    <:item on_click={Phoenix.LiveView.JS.navigate("/badge")}>Badge</:item>
    <:item on_click={Phoenix.LiveView.JS.navigate("/chip")}>Chip</:item>
  </.action_menu>
</div>
Trigger with border Open in playground 
<div id="action-menu-single-basic-with-border-storybook-wrapper" style="height: 300px;">
  <.action_menu
    id="action-menu-single-basic-with-border"
    label="Actions"
    show_border_for_trigger
  >
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Some params</:item>
    <:item on_click={Phoenix.LiveView.JS.navigate("/badge")}>Badge</:item>
    <:item on_click={Phoenix.LiveView.JS.navigate("/chip")}>Chip</:item>
  </.action_menu>
</div>
Title Open in playground 
<div id="action-menu-single-title-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-title" label="Actions" title="I'm a title">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Item 1</:item>
  </.action_menu>
</div>
Info Open in playground 
<div id="action-menu-single-info-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-info" label="Actions">
    <:info>Slot for anything.</:info>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Item 1</:item>
  </.action_menu>
</div>
With icons Open in playground 
<div id="action-menu-single-with-icons-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-with-icons" label="Actions">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="pencil-simple">Edit</:item>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="trash-simple">Delete</:item>
  </.action_menu>
</div>
With icons and menu title Open in playground 
<div id="action-menu-single-with-icons-and-title-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-with-icons-and-title" label="Actions" title="I'm a title">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="pencil-simple">Edit</:item>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="trash-simple">Delete</:item>
  </.action_menu>
</div>
Disabled Open in playground 
<div id="action-menu-single-disabled-storybook-wrapper" style="height: 300px;">
  <.action_menu disabled id="action-menu-single-disabled" label="Actions">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Item 1</:item>
  </.action_menu>
</div>
Disabled with border Open in playground 
<div id="action-menu-single-disabled-with-border-storybook-wrapper" style="height: 300px;">
  <.action_menu
    disabled
    id="action-menu-single-disabled-with-border"
    label="Actions"
    show_border_for_trigger
  >
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Item 1</:item>
  </.action_menu>
</div>
Disabled item Open in playground 
<div id="action-menu-single-disabled-item-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-disabled-item" label="Actions">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} disabled>Item 1</:item>
  </.action_menu>
</div>
Disabled item, with icon Open in playground 
<div id="action-menu-single-disabled-item-with-icon-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-disabled-item-with-icon" label="Actions">
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="pencil-simple" disabled>Edit Item</:item>
  </.action_menu>
</div>
Disabled item, with icon and menu title Open in playground 
<div id="action-menu-single-disabled-item-with-icon-and-title-storybook-wrapper" style="height: 300px;">
  <.action_menu
    id="action-menu-single-disabled-item-with-icon-and-title"
    label="Actions"
    title="I'm a title"
  >
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="pencil-simple" disabled>Edit Item</:item>
  </.action_menu>
</div>
With an avatar trigger Open in playground 
<div id="action-menu-single-avatar-trigger-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-avatar-trigger" label="User menu" title="Jane Doe">
    <:trigger>
      <.avatar initials="JD"></.avatar>
    </:trigger>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="pencil-simple">Edit Profile</:item>
  </.action_menu>
</div>
avatar trigger with info Open in playground 
<div id="action-menu-single-avatar-with-info-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-avatar-with-info" label="User menu">
    <:info>
      <.stack space="xs">
        <.h4 role="title">John Doe</.h4>
        <.p size="xs">Vendor Coordinator</.p>
      </.stack>
    </:info>
    <:trigger>
      <.avatar initials="JD"></.avatar>
    </:trigger>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")} icon="pencil-simple">Edit Profile</:item>
  </.action_menu>
</div>
Menu with anchor tags as menu items Open in playground 
<div id="action-menu-single-with-anchor-tags-as-menu-items-storybook-wrapper" style="height: 300px;">
  <.action_menu id="action-menu-single-with-anchor-tags-as-menu-items" label="Links">
    <:item href="https://google.com"}>Google</:item>
    <:item href="https://github.com"}>Github</:item>
    <:item href="https://cloudflare.com"}>Cloudflare</:item>
  </.action_menu>
</div>
Using aria-labelledby to reference a visible label Open in playground
Row item name 
<div id="action-menu-single-with-aria-labelledby-storybook-wrapper" style="height: 300px;">
  <span id="my-menu-label">Row item name</span>
  <.action_menu
    id="action-menu-single-with-aria-labelledby"
    label="Actions"
    aria_labelledby="my-menu-label"
  >
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Edit</:item>
    <:item on_click={Phoenix.LiveView.JS.patch("?foo=bar")}>Delete</:item>
  </.action_menu>
</div>