PetalComponents.ContextMenu (petal_components v4.16.1)

Copy Markdown View Source

A right-click menu attached to a region of the page.

Right-clicking anywhere inside the trigger region opens a floating menu at the cursor. Touch users get the same menu from a long press, and keyboard users open it with Shift+F10 or the Menu key while focus is inside the region. Everything outside the region keeps the browser's own context menu.

The panel is the same floating surface as dropdown/1, and the items share its anatomy - icons in the inner block, an optional kbd hint on the right, a danger variant for the destructive one.

Examples

The pointer path - right-click the card:

<.context_menu id="file-card">
  <:trigger>
    <div class="p-6 border rounded-xl">Q3-forecast.xlsx</div>
  </:trigger>

  <.context_menu_item link_type="button" phx-click="open" label="Open" />
  <.context_menu_item link_type="button" phx-click="rename" label="Rename" />
  <.context_menu_separator />
  <.context_menu_item
    link_type="button"
    phx-click="delete"
    variant="danger"
    kbd="⌘⌫"
    label="Delete"
  />
</.context_menu>

Items take arbitrary content, so an icon is just an icon:

<.context_menu id="doc-body">
  <:trigger>
    <p>Right-click this paragraph.</p>
  </:trigger>

  <.context_menu_label>Selection</.context_menu_label>
  <.context_menu_item link_type="button" phx-click="copy" kbd="⌘C">
    <.icon name="hero-clipboard" class="w-4 h-4" /> Copy
  </.context_menu_item>
  <.context_menu_item link_type="a" to="/search" label="Search the web" />
</.context_menu>

Touch and keyboard

Long-pressing the region for half a second opens the menu at the finger, and the OS text-selection callout is suppressed inside the region so the press reads as a menu gesture rather than a selection.

Keyboard users tab to the region (it is a focus stop) and press Shift+F10 or the Menu key. The menu then opens at the region with the first item focused. Arrow keys move through the items and skip disabled ones, Home and End jump to the ends, Enter and Space activate, Escape closes and hands focus back to the region.

Turning it off

disabled drops the hook entirely, so right-clicking the region falls straight through to the browser's native menu:

<.context_menu id="file-card" disabled={@read_only}>
  ...
</.context_menu>

Summary

Functions

context_menu(assigns)

The trigger region and its menu. See the module docs for the pointer, touch and keyboard paths.

context_menu_item(assigns)

One command in a context menu.

context_menu_label(assigns)

A non-interactive heading for a group of items.

context_menu_separator(assigns)

A thin divider between groups of items.

Functions

context_menu(assigns)

The trigger region and its menu. See the module docs for the pointer, touch and keyboard paths.

<.context_menu id="file-card">
  <:trigger><div class="p-6 border rounded-xl">Q3-forecast.xlsx</div></:trigger>
  <.context_menu_item link_type="button" phx-click="open" label="Open" />
</.context_menu>

Attributes

  • id (:string) - the component id; autogenerated if not set.
  • disabled (:boolean) - disables the context menu entirely; right-click falls through to the browser default menu. Defaults to false.
  • class (:any) - extra classes for the trigger region wrapper. Defaults to nil.
  • menu_class (:any) - extra classes for the menu panel. Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - the right-clickable region. Rendered as a block wrapper, so put anything inside - a card, a table row, a text area.
  • inner_block (required) - the menu items.

context_menu_item(assigns)

One command in a context menu.

<.context_menu_item link_type="button" phx-click="rename" label="Rename" kbd="F2" />

Attributes

  • to (:string) - link path. Defaults to nil.
  • label (:string) - the item label; or pass content in the inner block. Defaults to nil.
  • link_type (:string) - what the item renders as. Defaults to "button". Must be one of "a", "live_patch", "live_redirect", or "button".
  • disabled (:boolean) - greys the item out and takes it off the arrows. Defaults to false.
  • variant (:string) - danger renders the destructive treatment (danger ramp text, danger hover surface). Defaults to "default". Must be one of "default", or "danger".
  • kbd (:string) - right-aligned keyboard shortcut hint, e.g. "⌘D". Defaults to nil.
  • class (:any) - any additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["method", "download", "hreflang", "ping", "referrerpolicy", "rel", "target", "type"].

Slots

  • inner_block - the item content - text, an icon, whatever the row needs.

context_menu_label(assigns)

A non-interactive heading for a group of items.

<.context_menu_label>Selection</.context_menu_label>

Attributes

  • class (:any) - any additional CSS classes. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the heading text.

context_menu_separator(assigns)

A thin divider between groups of items.

Attributes

  • class (:any) - any additional CSS classes. Defaults to nil.
  • Global attributes are accepted.