LanternUI.Components.Menu (LanternUI v0.8.2)

Menu button and menubar — no Fluxon equivalent. Clean-room implementations of the WAI-ARIA APG menu-button and menubar patterns.

<.menu id="file-actions" label="File">
  <.menu_item phx-click="new">New</.menu_item>
  <.menu_item phx-click="open">Open…</.menu_item>
  <.menu_separator />
  <.menu_item phx-click="delete" data-danger>Delete</.menu_item>
</.menu>

<.menubar label="Editor">
  <.menubar_menu label="File">
    <.menu_item phx-click="new">New</.menu_item>
  </.menubar_menu>
  <.menubar_menu label="Edit">
    <.menu_item phx-click="undo">Undo</.menu_item>
  </.menubar_menu>
</.menubar>

How this differs from dropdown: the component owns the trigger button, so aria-haspopup/aria-expanded/aria-controls are always wired (a custom trigger is content inside the button via the :trigger slot, never a replacement button), the popup is an aria-labelledby-named role="menu", and the hooks run the full APG keyboard model — wrapping ArrowUp/Down, Home/End, roving tabindex, and (for the menubar) horizontal ArrowLeft/Right across top-level items that carries an open submenu along.

ARIA ownership split: the server renders aria-expanded="false" as a static literal and every popup item tabindex="-1"; the LanternMenu / LanternMenubar hooks own both at runtime (expanded state and the roving tabindex). Focus moves by roving DOM focus, the library-wide model — not aria-activedescendant.

Summary

Functions

menu(assigns)

menu_item(assigns)

A menu item.

menu_separator(assigns)

menubar(assigns)

menubar_menu(assigns)

Functions

menu(assigns)

Attributes

id (:string) - Stable DOM id for the menu hook; auto-generated when omitted. Defaults to nil.
label (:string) - Trigger button text when no :trigger slot. Defaults to nil.
class (:any) - Extra classes on the popup menu panel. Defaults to nil.
container_class (:any) - Extra classes on the menu root wrapper. Defaults to nil.
trigger_class (:any) - Extra classes on the trigger button. Defaults to nil.
disabled (:boolean) - Render the trigger disabled. Defaults to false.
placement (:string) - Where the menu anchors relative to the trigger. Defaults to "bottom-start". Must be one of "bottom-start", "bottom-end", "top-start", or "top-end".
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

trigger - Custom trigger content, rendered inside the component-owned button.
inner_block (required) - Menu items and separators.

menu_item(assigns)

A menu item.

Renders a <button> by default. Given navigate, patch or href it renders a <.link> instead, because a menu that cannot contain a link forces every caller with a navigating entry to fake one — and a menu item with neither a click handler nor an href is a dead control that fails silently. (Found in flicker: overflow-menu entries that only carried a path rendered as buttons with no target, so the whole dropdown looked broken.)

Both variants keep role="menuitem" and tabindex="-1", which is what the hooks' roving-focus model selects on — so the keyboard contract is identical either way. disabled on a link becomes data-disabled + aria-disabled, since anchors have no disabled attribute; the hooks' item query already skips both.

Attributes

class (:any) - Extra classes merged onto the root element. Defaults to nil.
disabled (:boolean) - Render disabled and skipped by arrow keys. Defaults to false.
navigate (:string) - Live-navigate here on activation. Renders the item as a link, not a button. Defaults to nil.
patch (:string) - Live-patch here on activation. Renders the item as a link, not a button. Defaults to nil.
href (:any) - Plain href. Renders the item as a link, not a button. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

inner_block (required) - Menu item label.

menu_separator(assigns)

Attributes

class (:any) - Extra classes merged onto the root element. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

menubar(assigns)

Attributes

id (:string) - Stable DOM id for the menubar hook; auto-generated when omitted. Defaults to nil.
label (:string) (required) - Accessible name for the menubar (aria-label); required by the APG.
class (:any) - Extra classes merged onto the root element. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

inner_block (required) - menubar_menu entries.

menubar_menu(assigns)

Attributes

id (:string) - Stable DOM id for this entry; auto-generated when omitted. Defaults to nil.
label (:string) (required) - Top-level menubar item text.
class (:any) - Extra classes on the popup menu panel. Defaults to nil.
trigger_class (:any) - Extra classes on the top-level item button. Defaults to nil.
disabled (:boolean) - Render the entry disabled. Defaults to false.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

inner_block (required) - Menu items and separators.