Doggo Storybook 0.10.4-58-gbc96e61

Menu

Renders a menu that offers a list of actions or functions.

Read more Read less

This component is meant for organizing actions within an application, rather than for navigating between different pages or sections of a website.

See also menu_bar/1, menu_group/1, menu_button/1, menu_item/1, and menu_item_checkbox/1.

Usage

If the menu is always visible or can only be toggled by a keyboard shortcut, set the label attribute.

<.menu label="Actions">
  <:item>Copy</:item>
  <:item>Paste</:item>
  <:item role="separator"></:item>
  <:item>Sort lines</:item>
</.menu>

If the menu is toggled by a menu_button/1, ensure that the controls attribute of the button matches the DOM ID of the menu and that the labelledby attribute of the menu matches the DOM ID of the button.

<.menu_button controls=”actions-menu” id=”actions-button”> Actions </.menu_button> <.menu labelledby=”actions-button” hidden></.menu>

Default Open in playground 
<.menu label="Actions">
  <:item>
    <.menu_item on_click={JS.push("view-dog-profiles")}>
      View Dog Profiles
    </.menu_item>
  </:item>
  <:item>
    <.menu_item on_click={JS.push("add-dog-profile")}>
      Add Dog Profile
    </.menu_item>
  </:item>
  <:item role="separator" />
  <:item>
    <.menu_item on_click={JS.push("dog-care-tips")}>
      Dog Care Tips
    </.menu_item>
  </:item>
</.menu>