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>