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

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

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 id * :string

A unique DOM ID. Needed for the JavaScript hook.
label :string

A accessibility label for the menubar. Set as aria-label attribute.

 Read more Read less

You should ensure that either the label or the labelledby attribute is set.

Do not repeat the word menu bar in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels this menu bar.

 Read more Read less

Example:

Dog Actions

You should ensure that either the label or the labelledby attribute is set.
rest :global

Any additional HTML attributes.
Required item * :slot
Show slot attributes Hide slot attributes
role :string

Sets the role of the list item. If the item has a menu item, group, menu item radio group or menu item checkbox as a child, use "none". If you want to render a visual separator, use "separator". The default is "none".

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