Context Menu

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
} from "@/components/ui/context-menu"

const items = [
  { id: "1", label: "Back", shortcut: "⌘ [", onSelect: () => console.log("Back") },
  { id: "2", label: "Forward", shortcut: "⌘ ]", disabled: true },
  { id: "3", label: "Reload", shortcut: "⌘ R", onSelect: () => console.log("Reload") },
  { id: "sep1", separator: true },
  { id: "4", label: "Show Bookmarks Bar", shortcut: "⇧ ⌘ B", checked: true },
]

function MyComponent() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <div className="border-2 border-dashed border-foreground p-8 rounded">
          Right click here
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent items={items} />
    </ContextMenu>
  )
}