Renders a button that toggles an actions menu.
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
.
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>