PhiaUi.Components.Menubar (phia_ui v0.1.17)

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

Summary

Functions

menubar(assigns)

Renders the horizontal menubar container.

menubar_content(assigns)

Renders the floating content panel for a menubar menu.

menubar_item(assigns)

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

menubar_menu(assigns)

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

menubar_separator(assigns)

Renders a horizontal visual divider between groups of menu items.

menubar_trigger(assigns)

Renders the trigger button for a menubar menu.

Functions

menubar(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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.