videorc/uiContext Menu
A menu at the pointer on right-click or long press, with the same popup tier and 28 px items as Dropdown Menu.
Installation
$ pnpm dlx shadcn@latest add @videorc/context-menuUsage
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";<ContextMenu>
<ContextMenuTrigger>{sceneCard}</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onClick={rename}>Rename…</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>A right-click is a shortcut, never the only way in: every action in a context menu is also in the item's Dropdown Menu or on screen.
Anatomy
<ContextMenu>
<ContextMenuTrigger />
<ContextMenuContent>
<ContextMenuLabel />
<ContextMenuGroup>
<ContextMenuItem>
<ContextMenuShortcut />
</ContextMenuItem>
</ContextMenuGroup>
<ContextMenuSeparator />
<ContextMenuCheckboxItem />
<ContextMenuRadioGroup>
<ContextMenuRadioItem />
</ContextMenuRadioGroup>
<ContextMenuSub>
<ContextMenuSubTrigger />
<ContextMenuSubContent />
</ContextMenuSub>
</ContextMenuContent>
</ContextMenu>Examples
Checkbox items
The Stream Manager's stats bar: right-click it to choose which stats show. Checkbox items keep the menu open.
Theming
| Token or attribute | Meaning |
|---|---|
glass-float | The popup tier: the window's solid tone, a 1 px rim and the float drop |
rounded-lg | The popup tier's 10 px corners, with a 4 px inset |
min-h-7, rounded-chip | 28 px items with 6 px corners |
bg-accent | The highlighted item |
data-variant="destructive" | The destructive item's tone |
select-none | On the trigger, so a right-click doesn't select its text |
Keyboard
| Key | Action |
|---|---|
ArrowDown, ArrowUp | Moves between items |
ArrowRight, ArrowLeft | Opens or closes a submenu |
Enter, Space | Chooses the highlighted item |
Escape | Closes the menu |
Accessibility
The menu opens from the pointer, so it has no keyboard path of its own; that is why its actions live somewhere else too. Like Dropdown Menu, it stops wheel events at its edge, and a ContextMenuLabel outside any group is a plain heading row.
API reference
Every Base UI Context Menu prop, plus:
ContextMenuContent
Prop
Type
ContextMenuItem
Prop
Type
Dropdown Menu
A menu of actions from a button, on the popup tier of the float glass, with 28 px items, a destructive variant, shortcuts, checkbox and radio items and submenus.
Select
Choose one value from a list. A 28 px trigger (24 px in dense rows) and a list on the popup tier of the float glass; inside a Field, its label names it.