ContextMenu

Right-click context menu for contextual actions on elements.

Basic

Right click here

<HStack justify="center">
  <ContextMenu>
    <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>
        Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem>
        Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem>
        Reload <ContextMenuShortcut>⌘R</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem>
        Save As... <ContextMenuShortcut>⌘S</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem>Print...</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</HStack>

With submenus

Right click here

<HStack justify="center">
  <ContextMenu>
    <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Cut</ContextMenuItem>
      <ContextMenuItem>Copy</ContextMenuItem>
      <ContextMenuItem>Paste</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuSub>
        <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
        <ContextMenuSubContent>
          <ContextMenuItem>Email</ContextMenuItem>
          <ContextMenuItem>Messages</ContextMenuItem>
          <ContextMenuItem>Slack</ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem>Copy Link</ContextMenuItem>
        </ContextMenuSubContent>
      </ContextMenuSub>
      <ContextMenuSub>
        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
        <ContextMenuSubContent>
          <ContextMenuItem>Developer Tools</ContextMenuItem>
          <ContextMenuItem>Task Manager</ContextMenuItem>
          <ContextMenuItem>Extensions</ContextMenuItem>
        </ContextMenuSubContent>
      </ContextMenuSub>
    </ContextMenuContent>
  </ContextMenu>
</HStack>

With checkbox items

Right click here

<HStack justify="center">
  <ContextMenu>
    <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuLabel>View Options</ContextMenuLabel>
      <ContextMenuSeparator />
      <ContextMenuCheckboxItem checked>
        Show Toolbar
      </ContextMenuCheckboxItem>
      <ContextMenuCheckboxItem checked>
        Show Sidebar
      </ContextMenuCheckboxItem>
      <ContextMenuCheckboxItem>
        Show Status Bar
      </ContextMenuCheckboxItem>
      <ContextMenuSeparator />
      <ContextMenuCheckboxItem checked>
        Full Screen
      </ContextMenuCheckboxItem>
    </ContextMenuContent>
  </ContextMenu>
</HStack>

With radio items

Right click here

<HStack justify="center">
  <ContextMenu>
    <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuLabel>Sort By</ContextMenuLabel>
      <ContextMenuSeparator />
      <ContextMenuRadioGroup value="date">
        <ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>
        <ContextMenuRadioItem value="date">Date Modified</ContextMenuRadioItem>
        <ContextMenuRadioItem value="size">Size</ContextMenuRadioItem>
        <ContextMenuRadioItem value="type">Type</ContextMenuRadioItem>
      </ContextMenuRadioGroup>
    </ContextMenuContent>
  </ContextMenu>
</HStack>

Destructive items

Right click here

<HStack justify="center">
  <ContextMenu>
    <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-xl border border-dashed text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Open</ContextMenuItem>
      <ContextMenuItem>Rename</ContextMenuItem>
      <ContextMenuItem>Duplicate</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem>Archive</ContextMenuItem>
      <ContextMenuItem variant="destructive">
        Delete
      </ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</HStack>