- 1.5.0

Menu Bar

Renders a menu bar, similar to those found in desktop applications.

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

Maturity: Developing

Usage

<.menu_bar id="main-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>

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

Keyboard

  • Left and Right - move between the items, wrapping at the ends.
  • Home and End - first and last item.
  • Printable characters - move to the next item whose label starts with what you type.
  • Enter or Space - activate the focused item.

The menu bar is a single tab stop.

Default
Open in playground 
<div style="inline-size: 100%">
  <.menu_bar id="menu-bar-single-default" label="Main">
    <:item>
      <.menu_button controls="menu-bar-actions-menu" id="menu-bar-actions-button" menuitem>
      Actions
    </.menu_button>
      <.menu id="menu-bar-actions-menu" labelledby="menu-bar-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>
</div>
All item types
Open in playground 
<div id="menu-bar-all-items" style="inline-size: 100%">
  <.menu_bar id="menu-bar-single-all-item-types" label="Main">
    <:item>
      <.menu_group label="Profiles">
        <: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>
      </.menu_group>
    </:item>
    <:item role="separator" />
    <:item>
      <.menu_item_checkbox on_click={JS.toggle_attribute({"aria-checked", "true", "false"})}>
        Word wrap
      </.menu_item_checkbox>
    </:item>
    <:item role="separator" />
    <:item>
      <.menu_item_radio_group label="Theme">
        <:item checked on_click={JS.set_attribute({"aria-checked", "false"}, to: "#menu-bar-all-items [role='menuitemradio']") |> JS.set_attribute({"aria-checked", "true"}) |> JS.dispatch("switch-theme-light")}>Light</:item>
        <:item on_click={JS.set_attribute({"aria-checked", "false"}, to: "#menu-bar-all-items [role='menuitemradio']") |> JS.set_attribute({"aria-checked", "true"}) |> JS.dispatch("switch-theme-dark")}>Dark</:item>
      </.menu_item_radio_group>
    </:item>
  </.menu_bar>
</div>