Default
Right-click here
With Sub-menu
Right-click for sub-menus
Checkbox & Radio Items
Right-click for checkboxes & radios
Sub-components
| Sub-component | Type | Description |
|---|---|---|
| ContextMenu | Root | Wraps the trigger and content |
| ContextMenu.Trigger | Component | Area that listens for right-click |
| ContextMenu.Content | Component | Popover container for items |
| ContextMenu.Item | Component | A single menu item |
| ContextMenu.CheckboxItem | Component | Item with a checkbox indicator |
| ContextMenu.RadioGroup | Component | Groups radio items together |
| ContextMenu.RadioItem | Component | Item with a radio indicator |
| ContextMenu.Label | Component | Non-interactive label for grouping |
| ContextMenu.Separator | Component | Visual separator between items |
| ContextMenu.Shortcut | Component | Displays a keyboard shortcut hint |
| ContextMenu.Sub | Component | Wraps a sub-menu trigger and content |
| ContextMenu.SubTrigger | Component | Item that opens a sub-menu |
| ContextMenu.SubContent | Component | Content for the sub-menu |
| ContextMenu.Group | Component | Groups related items |
Usage
<ContextMenu>
<ContextMenu.Trigger>
<div>Right-click here</div>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item>
Back <ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem checked={checked} onCheckedChange={setChecked}>
Show Bookmarks
</ContextMenu.CheckboxItem>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>More Tools</ContextMenu.SubTrigger>
<ContextMenu.SubContent>
<ContextMenu.Item>Extensions</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>
</ContextMenu.Content>
</ContextMenu>