Context
ContextMenu shows commands related to an area or element when people right-click it.
Opens on right-click, long press on touch screens, or the Menu key / Shift+F10. Shares Menu's surface and item styles: icon, shortcut, checkbox, radio, label, divider, submenu.
Right-click here
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,} from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Right-click here
Checkbox, radio & submenu
Usage
Do
- Only include commands that relate directly to the clicked element.
- Make sure every command in the ContextMenu can also be reached another way (toolbar, menu).
Don't
- Don't hide important features only in a ContextMenu.
- Don't override the browser's context menu on regular text areas.
Props
| Prop · Type | Default | Description |
|---|---|---|
| ContextMenu | Default: — | Called when it opens or closes. |
| ContextMenu | Default: true | true: while the menu is open, page scrolling is locked, an outside click only closes the menu and the rest of the page is hidden from screen readers. false: the page keeps scrolling and outside clicks reach it right away. See Scroll lock. |
| ContextMenuTrigger | Default: — | Uses the child element as the right-click area. |
| ContextMenuItem | Default: — | Size 20 icon and a shortcut on the right. |
| ContextMenuCheckboxItem | Default: — | On/off (controlled). |
| ContextMenuRadioGroup | Default: — | Exclusive choice. |
| ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent— | Default: — | Submenu; ContextMenuSubTrigger takes an icon. |