Context Menu

A right-click context menu that positions itself at the pointer using Floating UI.

<.context_menu></.context_menu>

Examples

With sections

Grouped items separated by a label and divider.

<.context_menu id="sections-context-menu">
  <:trigger>
    <div class="flex h-40 w-full items-center justify-center rounded-md border border-dashed text-sm">
      Right click here
    </div>
  </:trigger>
  <.context_menu_label>Actions</.context_menu_label>
  <.context_menu_item id="sections-context-menu">Back
    <.context_menu_shortcut>⌘[</.context_menu_shortcut>
  </.context_menu_item>
  <.context_menu_item id="sections-context-menu">Forward
    <.context_menu_shortcut>⌘]</.context_menu_shortcut>
  </.context_menu_item>
  <.context_menu_item id="sections-context-menu">Reload
    <.context_menu_shortcut>⌘R</.context_menu_shortcut>
  </.context_menu_item>
  <.context_menu_separator />
  <.context_menu_label>More Tools</.context_menu_label>
  <.context_menu_item id="sections-context-menu">Save Page As...
    <.context_menu_shortcut>⇧⌘S</.context_menu_shortcut>
  </.context_menu_item>
  <.context_menu_separator />
  <.context_menu_item id="sections-context-menu">Inspect</.context_menu_item>
</.context_menu>

Show code

Props

Name	Type	Default	Values
class	:string
id	:string
trigger_class	:string
inner_block (slot)	:slot
trigger (slot)	:slot