Context Menu

A menu that opens at the pointer on right-click or long-press. It shares its item vocabulary with Dropdown Menu — items, checkbox and radio items, labels, separators, shortcuts and submenus.

tsx

1import {
2  ContextMenu,
3  ContextMenuTrigger,
4  ContextMenuContent,
5  ContextMenuItem,
6  ContextMenuSeparator,
7  ContextMenuShortcut,
8} from "@pestoui/core"

Row actions

The trigger is the whole region the menu belongs to. Every action here should also be reachable some other way — a context menu is invisible until someone tries it.

Right-click here

Props

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	On ContextMenuItem. Destructive paints the label and its icon in the destructive colour.
inset	boolean	—	On ContextMenuItem, ContextMenuLabel, ContextMenuSubTrigger, ContextMenuCheckboxItem and ContextMenuRadioItem. Indents the row to line up with rows that carry an indicator.
checked / onCheckedChange	boolean / (checked: boolean) => void	—	On ContextMenuCheckboxItem.
value / onValueChange	string / (value: string) => void	—	On ContextMenuRadioGroup, with a value on each ContextMenuRadioItem.
onOpenChange	(open: boolean) => void	—	On ContextMenu. Fires when the menu opens or closes.

PreviousCommand Next Date Picker

Pesto UI · 117 documented components