Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <div data-controller="popover" data-popover-options-value="{"trigger":"manual"}">
    <div data-popover-target="trigger" data-action="contextmenu->popover#handleContextMenu" class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">Right click here</div>
    <template data-popover-target="content">
      <div role="menu" aria-orientation="vertical" data-state="open" class="z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-64" tabindex="-1" data-orientation="vertical"><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem">Back<span class="ml-auto text-xs tracking-widest text-muted-foreground">⌘[</span></a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem" data-disabled disabled>Forward<span class="ml-auto text-xs tracking-widest text-muted-foreground">⌘]</span></a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem">Reload<span class="ml-auto text-xs tracking-widest text-muted-foreground">⌘R</span></a>
        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div>
        <a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem"><span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><span data-state="checked"><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></span>Show Bookmarks Bar<span class="ml-auto text-xs tracking-widest text-muted-foreground">⌘⇧B</span></a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem">Show Full URLs</a>
        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div>
        <div class="px-2 py-1.5 text-sm font-semibold text-foreground pl-8">More Tools</div>
        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div>
        <a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem">Developer Tools</a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem">Task Manager</a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" tabindex="-1" data-orientation="vertical" data-action="click->popover#close" data-popover-target="menuItem">Extensions</a></div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
render(TestView.new) do
  ContextMenu do
    ContextMenuTrigger(class: "flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm") { "Right click here" }
    ContextMenuContent(class: "w-64") do
      ContextMenuItem(href: "#", shortcut: "⌘[") { "Back" }
      ContextMenuItem(href: "#", shortcut: "⌘]", disabled: true) { "Forward" }
      ContextMenuItem(href: "#", shortcut: "⌘R") { "Reload" }
      ContextMenuSeparator()
      ContextMenuItem(href: "#", shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
      ContextMenuItem(href: "#") { "Show Full URLs" }
      ContextMenuSeparator()
      ContextMenuLabel(inset: true) { "More Tools" }
      ContextMenuSeparator()
      ContextMenuItem(href: "#") { "Developer Tools" }
      ContextMenuItem(href: "#") { "Task Manager" }
      ContextMenuItem(href: "#") { "Extensions" }
    end
  end
end

Default ContextMenu

No params configured.