Context Menu

Displays actions from a right click, long press, or keyboard context-menu command.

Basic

    <.context_menu id="message-menu" trigger_class="w-full">
  <:trigger>
    <div class="flex h-40 w-full items-center justify-center rounded-lg border-2 border-dashed border-border text-sm text-muted-foreground">
      Right click here
    </div>
  </:trigger>
  <.context_menu_label>Message</.context_menu_label>
  <.context_menu_item phx-click="reply">
    <.icon name="lucide-reply" class="size-4" /> Reply
  </.context_menu_item>
  <.context_menu_item phx-click="copy-link" phx-value-id="message-42">
    <.icon name="lucide-copy" class="size-4" /> Copy link
  </.context_menu_item>
  <.context_menu_separator />
  <.context_menu_item variant="destructive" phx-click="delete">
    <.icon name="lucide-trash-2" class="size-4" /> Delete
  </.context_menu_item>
</.context_menu>
<p :if={@last_action} class="text-sm text-muted-foreground">
  Action: <span class="font-medium text-foreground">{@last_action}</span>
</p>
  

Menu items accept normal LiveView bindings. Put phx-click on the item, and pass context with phx-value-* or phx-target when the action belongs to a component.

With Shortcuts

Display keyboard hints with the shortcut prop on context_menu_item.

With Shortcuts

    <.context_menu id="editor-menu" trigger_class="w-full">
  <:trigger>
    <div class="flex h-40 w-full items-center justify-center rounded-lg border-2 border-dashed border-border text-sm text-muted-foreground">
      Right click the editor
    </div>
  </:trigger>
  <.context_menu_item shortcut="⌘Z">Undo</.context_menu_item>
  <.context_menu_item shortcut="⇧⌘Z">Redo</.context_menu_item>
  <.context_menu_separator />
  <.context_menu_item shortcut="⌘C">Copy</.context_menu_item>
  <.context_menu_item shortcut="⌘V">Paste</.context_menu_item>
</.context_menu>
  

Checkbox And Radio Items

Use context_menu_checkbox_item for toggleable boolean states and context_menu_radio_item for mutually exclusive choices. Both show an indicator when checked.

Checkbox And Radio

    <.context_menu id="settings-menu" trigger_class="w-full">
  <:trigger>
    <div class="flex h-40 w-full items-center justify-center rounded-lg border-2 border-dashed border-border text-sm text-muted-foreground">
      Right click for settings
    </div>
  </:trigger>
  <.context_menu_label>Preferences</.context_menu_label>
  <.context_menu_checkbox_item checked={@auto_save} phx-click="toggle-autosave">
    Auto-save
  </.context_menu_checkbox_item>
  <.context_menu_separator />
  <.context_menu_label>View</.context_menu_label>
  <.context_menu_radio_item value="list" checked={@view_mode == "list"} phx-click="set-view" phx-value-mode="list">
    List view
  </.context_menu_radio_item>
  <.context_menu_radio_item value="grid" checked={@view_mode == "grid"} phx-click="set-view" phx-value-mode="grid">
    Grid view
  </.context_menu_radio_item>
  <.context_menu_radio_item value="compact" checked={@view_mode == "compact"} phx-click="set-view" phx-value-mode="compact">
    Compact view
  </.context_menu_radio_item>
</.context_menu>
  

With Submenu

Nest context_menu_sub with a :trigger slot and menu items to build submenus. Submenus open on hover (mouse) and on Right-arrow (keyboard); Left-arrow or Escape closes them.

With Submenu

    <.context_menu id="share-menu" trigger_class="w-full">
  <:trigger>
    <div class="flex h-40 w-full items-center justify-center rounded-lg border-2 border-dashed border-border text-sm text-muted-foreground">
      Right click to share
    </div>
  </:trigger>
  <.context_menu_item>
    <.icon name="lucide-external-link" class="size-4" /> Open
  </.context_menu_item>
  <.context_menu_separator />
  <.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_item phx-click="twitter">Twitter</.context_menu_item>
  </.context_menu_sub>
</.context_menu>
  