Doggo Storybook 0.9.0

Menu Button

Renders a button that toggles an actions menu.

Read more Read less

This component can be used on its own or as part of a menu_bar/1 or menu/1. See also menu_item/1, menu_item_checkbox/1, and menu_group/1.

For a button that toggles the visibility of an element that is not a menu, use disclosure_button/1. For a button that toggles other states, use toggle_button/1. See also button/1 and button_link/1.

Usage

Set the controls attribute to the DOM ID of the element that you want to toggle with the button.

The initial state is hidden. Do not forget to add the hidden attribute to the toggled menu. Otherwise, visibility of the element will not align with the aria-expanded attribute of the button.

<div>
  <.menu_button controls="actions-menu" id="actions-button">
    Actions
  </.menu_button>

<.menu id=”actions-menu” labelledby=”actions-button” hidden>

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

If this menu button is a child of a menu_bar/1 or a menu/1, set the menuitem attribute.

<.menu id="actions-menu">
  <:item>
    <.menu_button controls="actions-menu" id="actions-button" menuitem>
      Dog Actions
    </.menu_button>
    <.menu id="dog-actions-menu" labelledby="actions-button" hidden>
<!-- ... -->
</:item>
    </.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 controls * :string The DOM ID of the element that this button controls.
Required id * :string The DOM ID of the button. Set the `aria-labelledby` attribute of the toggled menu to the same value.
menuitem :boolean Set this attribute to `true` if the menu button is used as a child of a `menu_bar/1`. This ensures that the `role` is set to `menuitem`. false
rest :global
Required inner_block * :slot 
Actions