Overlays

Context Menu

Right-click menu with items, checkboxes and submenus.

Import

tsx

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from "@cooud-ui/ui";

bash

npx cooud-ui add context-menu

Examples

On a surface

A right-click menu on a target region — with shortcuts, a checkbox, a submenu and a radio group.

Right-click here

tsx

function ContextMenuDemo() {
  const [bookmarked, setBookmarked] = useState(true);
  const [branch, setBranch] = useState("main");

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-full max-w-sm select-none items-center justify-center rounded-lg border border-dashed border-border text-sm text-fg-secondary">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>
          <Scissors aria-hidden="true" />
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy aria-hidden="true" />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <ClipboardPaste aria-hidden="true" />
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked={bookmarked} onCheckedChange={setBookmarked}>
          Bookmarked
        </ContextMenuCheckboxItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <Users aria-hidden="true" />
            Share
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>
              <UserPlus aria-hidden="true" />
              Invite people
            </ContextMenuItem>
            <ContextMenuItem>
              <Copy aria-hidden="true" />
              Copy link
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuLabel>Branch</ContextMenuLabel>
        <ContextMenuRadioGroup value={branch} onValueChange={setBranch}>
          <ContextMenuRadioItem value="main">main</ContextMenuRadioItem>
          <ContextMenuRadioItem value="develop">develop</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

On a surface

A right-click menu on a target region — with shortcuts, a checkbox, a submenu and a radio group.

Right-click here

tsx

function ContextMenuDemo() {
  const [bookmarked, setBookmarked] = useState(true);
  const [branch, setBranch] = useState("main");

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-full max-w-sm select-none items-center justify-center rounded-lg border border-dashed border-border text-sm text-fg-secondary">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>
          <Scissors aria-hidden="true" />
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy aria-hidden="true" />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <ClipboardPaste aria-hidden="true" />
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked={bookmarked} onCheckedChange={setBookmarked}>
          Bookmarked
        </ContextMenuCheckboxItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <Users aria-hidden="true" />
            Share
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>
              <UserPlus aria-hidden="true" />
              Invite people
            </ContextMenuItem>
            <ContextMenuItem>
              <Copy aria-hidden="true" />
              Copy link
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuLabel>Branch</ContextMenuLabel>
        <ContextMenuRadioGroup value={branch} onValueChange={setBranch}>
          <ContextMenuRadioItem value="main">main</ContextMenuRadioItem>
          <ContextMenuRadioItem value="develop">develop</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}