SutraUI.ContextMenu (Sutra UI v0.4.0)

View Source

A right-click and keyboard-accessible context menu.

Renders a trigger that opens a positioned menu on right-click or keyboard input. Supports nested submenus, checkboxes, radio groups, shortcuts, labels, and separators — following the shadcn/ui composition model.

Menu items accept global attributes, so LiveView actions can be attached directly with phx-click, phx-value-*, phx-target, and the usual Phoenix bindings.

Examples

<.context_menu id="file-menu">
  <:trigger>
    <div class="rounded-lg border p-4">Right-click here</div>
  </:trigger>
  <.context_menu_item phx-click="new-file">New File</.context_menu_item>
  <.context_menu_separator />
  <.context_menu_checkbox_item checked={@auto_save} phx-click="toggle-autosave">
    Auto-save
  </.context_menu_checkbox_item>
  <.context_menu_sub>
    <:trigger>Share</:trigger>
    <.context_menu_item phx-click="copy-link">Copy link</.context_menu_item>
    <.context_menu_item phx-click="email">Email</.context_menu_item>
  </.context_menu_sub>
</.context_menu>

Sub-menus

context_menu_sub renders a submenu with its own :trigger slot and item content. Submenus open on hover (mouse) and on Right-arrow (keyboard), and close on Left-arrow or Escape.

Accessibility

  • Trigger has aria-haspopup="menu" and aria-expanded.
  • Menu uses role="menu", items use role="menuitem".
  • Keyboard navigation: ArrowUp/Down, Home/End, Enter/Space, Escape.
  • Submenu: Right arrow opens, Left arrow / Escape closes.
  • Checkbox items use role="menuitemcheckbox" with aria-checked.
  • Radio items use role="menuitemradio" with aria-checked.
  • Disabled items have aria-disabled="true".

Summary

Functions

context_menu(assigns)
context_menu_checkbox_item(assigns)

Renders a checkbox menu item with role="menuitemcheckbox".

context_menu_item(assigns)

Renders a context menu item. Pass LiveView events via phx-click on the item or render a link/button inside the slot.

context_menu_label(assigns)

Renders a non-interactive label for a group of items.

context_menu_radio_item(assigns)

Renders a radio menu item with role="menuitemradio".

context_menu_separator(assigns)

Renders a separator between menu items.

context_menu_sub(assigns)

Renders a submenu with a trigger and nested items.

Functions

context_menu(assigns)

Attributes

  • id (:string) (required) - Unique identifier for the context menu.
  • class (:any) - Additional CSS classes for the root. Defaults to nil.
  • trigger_class (:any) - Additional CSS classes for the trigger wrapper. Defaults to nil.
  • menu_class (:any) - Additional CSS classes for the menu. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • trigger (required) - Right-click target.
  • inner_block (required) - Menu content.

context_menu_checkbox_item(assigns)

Renders a checkbox menu item with role="menuitemcheckbox".

Attributes

  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

context_menu_item(assigns)

Renders a context menu item. Pass LiveView events via phx-click on the item or render a link/button inside the slot.

Attributes

  • variant (:string) - Defaults to "default". Must be one of "default", or "destructive".
  • disabled (:boolean) - Defaults to false.
  • shortcut (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

context_menu_label(assigns)

Renders a non-interactive label for a group of items.

Attributes

  • class (:any) - Defaults to nil.

Slots

  • inner_block (required)

context_menu_radio_item(assigns)

Renders a radio menu item with role="menuitemradio".

Attributes

  • value (:string) (required)
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

context_menu_separator(assigns)

Renders a separator between menu items.

Attributes

  • class (:any) - Defaults to nil.

context_menu_sub(assigns)

Renders a submenu with a trigger and nested items.

Attributes

  • class (:any) - Defaults to nil.

Slots

  • trigger (required)
  • inner_block (required)