# `PhiaUi.Components.Menubar`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/menubar.ex#L1)

Menubar component — a horizontal bar of menus for application-level navigation.

Follows the WAI-ARIA Menu Button pattern. Each menu within the bar is
triggered by a button (`menubutton` role) and reveals a floating content
panel (`menu` role) containing `menuitem` children.

The component renders full DOM structure with `data-menubar-*` attributes for
JS hook wiring. Content panels are hidden by default via the `hidden` class;
a JS hook toggles visibility at runtime.

## Sub-components

| Function              | Element  | Purpose                                     |
|-----------------------|----------|---------------------------------------------|
| `menubar/1`           | `div`    | Horizontal container with `role="menubar"`  |
| `menubar_menu/1`      | `div`    | Relative wrapper for one menu + its content |
| `menubar_trigger/1`   | `button` | Toggle button (`role="menubutton"`)          |
| `menubar_content/1`   | `div`    | Floating panel (`role="menu"`, hidden)       |
| `menubar_item/1`      | `button` | Clickable item (`role="menuitem"`)           |
| `menubar_separator/1` | `div`    | Visual divider (`role="separator"`)          |

## Example

    <.menubar id="main-menubar">
      <.menubar_menu>
        <.menubar_trigger>File</.menubar_trigger>
        <.menubar_content>
          <.menubar_item on_click="new_file">New File</.menubar_item>
          <.menubar_separator />
          <.menubar_item on_click="save" shortcut="⌘S">Save</.menubar_item>
        </.menubar_content>
      </.menubar_menu>
      <.menubar_menu>
        <.menubar_trigger>Edit</.menubar_trigger>
        <.menubar_content>
          <.menubar_item disabled>Undo</.menubar_item>
        </.menubar_content>
      </.menubar_menu>
    </.menubar>

## Accessibility

- The outer container has `role="menubar"`.
- Each trigger button has `role="menubutton"`, `aria-haspopup="menu"`, and
  `aria-expanded="false"` (updated by the JS hook when the panel is open).
- Each content panel has `role="menu"`.
- Each item has `role="menuitem"`.
- Disabled items use the HTML `disabled` attribute on the button, which
  prevents interaction while keeping the item visible.
- Separators use `role="separator"`.

# `menubar`

Renders the horizontal menubar container.

This is the top-level wrapper that holds all menus. It uses `role="menubar"`
to mark it as a menubar widget for assistive technology.

## Attributes

* `id` (`:string`) (required) - Unique element ID for the menubar container.
* `class` (`:string`) - Additional CSS classes for the container. Defaults to `nil`.
* Global attributes are accepted. Extra HTML attributes forwarded to the container `<div>`.
## Slots

* `inner_block` (required) - One or more `menubar_menu/1` components.

# `menubar_content`

Renders the floating content panel for a menubar menu.

Hidden by default via the `hidden` Tailwind class. The JS hook removes this
class when the associated trigger is activated and re-adds it on close.

The panel uses `role="menu"` and is positioned absolutely below the trigger
via `absolute left-0 top-full mt-1`.

## Attributes

* `class` (`:string`) - Additional CSS classes for the content panel. Defaults to `nil`.
* Global attributes are accepted. Extra HTML attributes forwarded to the menu panel `<div>`.
## Slots

* `inner_block` - Menu items and separators.

# `menubar_item`

Renders a clickable menu item with `role="menuitem"`.

Wire up a LiveView action with the `:on_click` attribute:

    <.menubar_item on_click="save">Save</.menubar_item>

Add a keyboard shortcut hint with `:shortcut`:

    <.menubar_item on_click="save" shortcut="⌘S">Save</.menubar_item>

Use `:disabled` to prevent interaction:

    <.menubar_item disabled>Undo</.menubar_item>

## Attributes

* `on_click` (`:string`) - LiveView event name for `phx-click`. Defaults to `nil`.
* `shortcut` (`:string`) - Keyboard shortcut label displayed right-aligned (e.g. `⌘S`). Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the item; adds `disabled` attr and visual dimming. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes for the item button. Defaults to `nil`.
* Global attributes are accepted. Extra HTML attributes forwarded to the `<button>`.
## Slots

* `inner_block` (required) - Item label content.

# `menubar_menu`

Renders the relative-positioned wrapper for a single menu within the menubar.

Each `menubar_menu/1` groups a trigger button with its associated content
panel. The `data-menubar-menu` attribute is used by the JS hook to discover
menu boundaries for open/close behaviour and click-outside detection.

## Attributes

* `class` (`:string`) - Additional CSS classes for the menu container. Defaults to `nil`.
* Global attributes are accepted. Extra HTML attributes forwarded to the container `<div>`.
## Slots

* `inner_block` (required) - Must contain one `menubar_trigger/1` and one `menubar_content/1`.

# `menubar_separator`

Renders a horizontal visual divider between groups of menu items.

Uses `role="separator"` and the `bg-border` token for the line colour.
The `-mx-1` negative margin ensures the separator spans the full width of
the content panel.

## Attributes

* `class` (`:string`) - Additional CSS classes for the separator. Defaults to `nil`.
* Global attributes are accepted. Extra HTML attributes forwarded to the separator `<div>`.

# `menubar_trigger`

Renders the trigger button for a menubar menu.

Sets WAI-ARIA attributes for the menu button pattern:
- `role="menubutton"` — identifies this as a menu-opening button
- `aria-haspopup="menu"` — indicates the button controls a menu
- `aria-expanded="false"` — initial closed state; the JS hook updates this

The `disabled` attribute prevents interaction when set.

## Attributes

* `class` (`:string`) - Additional CSS classes for the trigger button. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the trigger button, preventing menu open. Defaults to `false`.
* Global attributes are accepted. Extra HTML attributes forwarded to the `<button>`.
## Slots

* `inner_block` (required) - Trigger label content.

---

*Consult [api-reference.md](api-reference.md) for complete listing*