Context Menu

Displays a menu of actions triggered by a right click.

API Reference

Preview

Installation

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Cut</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API Reference

ContextMenu

Root component. Alias for ContextMenu.Root from Base UI.

ContextMenuTrigger

The area that triggers the context menu on right click. Alias for ContextMenu.Trigger from Base UI.

ContextMenuContent

Popup container with positioner. Wraps ContextMenu.Portal, ContextMenu.Positioner, and ContextMenu.Popup.

ContextMenuGroup

Groups related menu items together.

ContextMenuGroupLabel

Label for a context menu group.

ContextMenuItem

Individual selectable menu item.

ContextMenuSeparator

Visual separator between items or groups.

ContextMenuSubmenu

Root for a nested submenu. Alias for ContextMenu.SubmenuRoot from Base UI.

ContextMenuSubmenuTrigger

Trigger for a submenu. Includes a built-in arrow icon.

ContextMenuCheckboxItem

Toggleable menu item with a check indicator.

ContextMenuRadioGroup

Container for exclusive radio menu items.

ContextMenuRadioItem

Radio menu item with a dot indicator.

Examples

With Groups

Checkbox Items

Radio Items