context-menu-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu-example",
  "title": "Context Menu",
  "registryDependencies": [
    "button",
    "context-menu",
    "dialog",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-lyra/examples/context-menu-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/radix-lyra/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n      <ContextMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n                remixicon=\"RiClipboardLine\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent className=\"w-44\">\n          <ContextMenuGroup>\n            <ContextMenuLabel>Actions</ContextMenuLabel>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem inset>Paste</ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel inset>Appearance</ContextMenuLabel>\n            <ContextMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel inset>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem inset value=\"light\">\n                Light\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem inset value=\"dark\">\n                Dark\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem inset value=\"system\">\n                System\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuSub>\n            <ContextMenuSubTrigger inset>More Options</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}