Doggo Storybook 0.9.0

Menu Group

This component can be used to group items within a menu/1 or menu_bar/1.

Read more Read less

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

Usage

<.menu id="actions-menu" labelledby="actions-button" hidden>
  <:item>
    <.menu_group label="Dog 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>
        <.menu_item on_click={JS.push("dog-care-tips")}>
          Dog Care Tips
        </.menu_item>
      </:item>
    </.menu_group>
  </:item>
  <:item role="separator" />
  <:item>
    <.menu_item on_click={JS.push("help")}>Help</.menu_item>
  </:item>
</.menu>
Default Open in playground 
<.menu id="actions-menu" label="Main">
  <:item>
    <.menu_group label="Dog 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>
        <.menu_item on_click={JS.push("dog-care-tips")}>
          Dog Care Tips
        </.menu_item>
      </:item>
    </.menu_group>
  </:item>
  <:item role="separator" />
  <:item>
    <.menu_item on_click={JS.push("help")}>Help</.menu_item>

  </:item>
</.menu>