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>
</div>

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><!-- ... --></:item>
    </.menu>
  </:item>
  <:item><!-- ... --></:item>
</.menu>

This component needs the Doggo.MenuButton JavaScript hook. See Phoenix LiveView Hooks for registering it.

Keyboard

• Enter or Space - show or hide the menu.
• Down - open the menu and move to its first item.
• Up - open the menu and move to its last item.