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>

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

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.
label :string

A accessibility label for the menubar. Set as aria-label attribute.

 Read more Read less

You should ensure that either the label or the labelledby attribute is set.
labelledby :string

The DOM ID of an element that labels this menubar. If the menu is toggled

 Read more Read less

by a menu_button/1, this attribute should be set to the DOM ID of that button.

Example:

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

You should ensure that either the label or the labelledby attribute is set.
rest :global

Any additional HTML attributes.
Required item * :slot
Show slot attributes Hide slot attributes
role :string

Sets the role of the list item. If the item has a menu item, group, menu item radio group or menu item checkbox as a child, use "none". If you want to render a visual separator, use "separator". The default is "none".

 
<: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>