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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
Required label * :string A accessibility label for the group. Set as `aria-label` attribute.
rest :global Any additional HTML attributes.
Required item * :slot 
<: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>