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/1, menu_group/1, menu_button/1, menu_item/1, and menu_item_checkbox/1.

Usage

<.menu_bar label="Main">
  <:item>
    <.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>

</:item> <:item role=”separator”></:item> <:item>

<.menu_item on_click={JS.dispatch("myapp:help")}>
  Help
</.menu_item>

</:item> </.menu_bar>