Shadix.Components.DropdownMenu (shadix v0.0.1)

A dropdown menu built on client-side JS commands, Floating UI, and a small LiveView hook.

Like the dialog, this is a portal-free, fully client-driven menu. The trigger toggles the menu content with toggle_menu/1 (a Phoenix.LiveView.JS builder with enter/leave transitions); the ShadixDropdownMenu hook (assets/ts/dropdown_menu.ts) watches the content's visibility via a MutationObserver, positions it under the trigger with @floating-ui/dom (computePosition + autoUpdate, bottom-start/flip/shift), manages keyboard navigation (arrows/Home/End/Enter/Escape/Tab), and closes on outside pointerdown via the data-on-close JS (hide_menu/1).

Trigger and content ids are derived from the required :id so aria-controls, data-trigger, and the JS targets line up stably.

Summary

Functions

dropdown_menu(assigns)

Renders a dropdown menu with a :trigger slot and arbitrary menu items.

dropdown_menu_item(assigns)

A selectable menu item.

dropdown_menu_label(assigns)

A non-interactive group label within a dropdown menu.

dropdown_menu_separator(assigns)

A horizontal separator between dropdown menu sections.

dropdown_menu_shortcut(assigns)

A trailing keyboard-shortcut hint within a dropdown menu item.

hide_menu(id)

Returns the Phoenix.LiveView.JS command that closes the menu with id.

toggle_menu(id)

Returns the Phoenix.LiveView.JS command that toggles the menu with id.

Functions

dropdown_menu(assigns)

Renders a dropdown menu with a :trigger slot and arbitrary menu items.

The trigger is wrapped in a display: contents span wired to toggle_menu/1, carrying the menu's ARIA wiring. The content <div role="menu"> carries the ShadixDropdownMenu hook and is positioned by Floating UI at open time.

Attributes

id (:string) (required)
class (:string) - Defaults to nil.

Slots

trigger (required)
inner_block (required)

dropdown_menu_item(assigns)

A selectable menu item.

:id is the menu's id (not the item's). On click it runs the caller's :on_select JS and then closes the menu.

Attributes

id (:string) (required)
on_select (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_label(assigns)

A non-interactive group label within a dropdown menu.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_menu_separator(assigns)

A horizontal separator between dropdown menu sections.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

dropdown_menu_shortcut(assigns)

A trailing keyboard-shortcut hint within a dropdown menu item.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

hide_menu(id)

Returns the Phoenix.LiveView.JS command that closes the menu with id.

Hides the content panel with a leave transition. Used by the hook's data-on-close (Escape / Tab / outside click) and by menu items on select.

toggle_menu(id)

Returns the Phoenix.LiveView.JS command that toggles the menu with id.

Toggles the content panel's visibility with enter/leave transitions. The ShadixDropdownMenu hook reacts to the resulting visibility change to position the menu and wire up keyboard/outside-click handling.