Overlays

Dropdown & menus

Action menus, dropdowns and menubars.

Dropdown menu

Fluxon-compatible family with WAI-ARIA menu semantics — ↑↓ move through items, Esc closes, focus returns to the trigger.

Label trigger

Default toggle button from label=; header, buttons, separator, and danger item.

<.dropdown id="dd-demo" label="Actions">
  <.dropdown_header>object.png</.dropdown_header>
  <.dropdown_button><.icon name="arrow-down-tray" /> Download</.dropdown_button>
  <.dropdown_button><.icon name="arrow-path" /> Rename</.dropdown_button>
  <.dropdown_separator />
  <.dropdown_button data-danger><.icon name="trash" /> Delete</.dropdown_button>
</.dropdown>

Custom toggle & placement

:toggle slot for any trigger; placement anchors the panel.

<.dropdown id="dd-icon" placement="bottom-end">
  <:toggle>
    <.button size="icon" aria-label="More"><.icon name="ellipsis-horizontal" /></.button>
  </:toggle>
  <.dropdown_button>Duplicate</.dropdown_button>
  <.dropdown_button>Move…</.dropdown_button>
</.dropdown>

Custom content

Use dropdown_custom for non-item content that should stay inside the menu panel.

API reference

Props and slots, introspected from the component.

dropdown/1

Prop	Type	Default	Description
`animation`	`string`	`nil`	accepted for Fluxon compat
`animation_enter`	`string`	`nil`	accepted for Fluxon compat
`animation_leave`	`string`	`nil`	accepted for Fluxon compat
`class`	`any`	`nil`	classes for the menu panel
`container_class`	`any`	`nil`	Extra classes on the dropdown root wrapper.
`controlled`	`boolean`	`false`	Server-driven open state: `open` is truth, patches flow into the machine.
`disabled`	`boolean`	`false`	Render disabled and non-interactive.
`hover_close_delay`	`integer`	`nil`	accepted for Fluxon compat
`hover_open_delay`	`integer`	`nil`	accepted for Fluxon compat
`id`	`string`	`nil`	Stable DOM id for the dropdown hook; auto-generated when omitted, mirroring Fluxon's dropdown (drop-in parity).
`label`	`string`	`nil`	default toggle button text when no :toggle slot
`on_change`	`string`	`nil`	Server event pushed on open change (`lantern:menu:set-open` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on open change.
`open`	`boolean`	`nil`	Open state for `controlled` mode (client mode ignores it).
`open_on_hover`	`boolean`	`false`	accepted for Fluxon compat; click/keyboard only
`placement`	`bottom-start \| bottom-end \| top-start \| top-end`	`"bottom-start"`	Where the menu anchors relative to the toggle.
`toggle_class`	`any`	`nil`	Classes on the default toggle button.
Slots
`:inner_block`*	Menu items (buttons, links, separators).
`:toggle`	Custom trigger; defaults to a button using label.

dropdown_button/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`disabled`	`boolean`	`false`	Render disabled and non-interactive.
Slots
`:inner_block`*	Button menu item label.

dropdown_link/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`disabled`	`boolean`	`false`	Render disabled and non-interactive.
Slots
`:inner_block`*	Link menu item label.

dropdown_header/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
Slots
`:inner_block`*	Header label content.

dropdown_separator/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.

dropdown_custom/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
Slots
`:inner_block`*	Custom non-item content inside the menu.

Menu and menubar

These controls implement the APG menu-button and menubar keyboard models with roles, roving tabindex, arrow keys, Home, and End.

Actions

Items can be disabled, separated, linked, or custom-triggered.

Menubar

Top-level entries use horizontal arrow navigation.

<.menubar label="Editor"><.menubar_menu label="File"><.menu_item>New</.menu_item></.menubar_menu><.menubar_menu label="Edit"><.menu_item>Undo</.menu_item></.menubar_menu></.menubar>

API reference

Props and slots, introspected from the component.

menu/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes on the popup menu panel.
`container_class`	`any`	`nil`	Extra classes on the menu root wrapper.
`controlled`	`boolean`	`false`	Server-driven open state: `open` is truth, patches flow into the machine.
`disabled`	`boolean`	`false`	Render the trigger disabled.
`id`	`string`	`nil`	Stable DOM id for the menu hook; auto-generated when omitted.
`label`	`string`	`nil`	Trigger button text when no :trigger slot.
`on_change`	`string`	`nil`	Server event pushed on open change (`lantern:menu:set-open` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on open change.
`open`	`boolean`	`nil`	Open state for `controlled` mode (client mode ignores it).
`placement`	`bottom-start \| bottom-end \| top-start \| top-end`	`"bottom-start"`	Where the menu anchors relative to the trigger.
`trigger_class`	`any`	`nil`	Extra classes on the trigger button.
Slots
`:inner_block`*	Menu items and separators.
`:trigger`	Custom trigger content, rendered inside the component-owned button.

menu_item/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`disabled`	`boolean`	`false`	Render disabled and skipped by arrow keys.
`href`	`any`	`nil`	Plain href. Renders the item as a link, not a button.
`navigate`	`string`	`nil`	Live-navigate here on activation. Renders the item as a link, not a button.
`patch`	`string`	`nil`	Live-patch here on activation. Renders the item as a link, not a button.
Slots
`:inner_block`*	Menu item label.

menu_separator/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.

menubar/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`id`	`string`	`nil`	Stable DOM id for the menubar hook; auto-generated when omitted.
`label`*	`string`	`—`	Accessible name for the menubar (`aria-label`); required by the APG.
Slots
`:inner_block`*	`menubar_menu` entries.

menubar_menu/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes on the popup menu panel.
`disabled`	`boolean`	`false`	Render the entry disabled.
`id`	`string`	`nil`	Stable DOM id for this entry; auto-generated when omitted.
`label`*	`string`	`—`	Top-level menubar item text.
`trigger_class`	`any`	`nil`	Extra classes on the top-level item button.
Slots
`:inner_block`*	Menu items and separators.