shadcn.io is an independent project built on shadcn/ui
The dashed area reads Right click here. A Panel Position label sits over Top, Bottom, Right, and Left. Bottom starts selected.
Use radio items when exactly one option applies. A Radio Group on the page is better if the choice should stay visible. In React, Base UI keeps a single position selected.
Installation
Anatomy
Usage
<ContextMenu>
<ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
<span className="pointer-fine:inline-block hidden">
Right click here
</span>
<span className="pointer-coarse:inline-block hidden">
Long press here
</span>
</ContextMenuTrigger>
<ContextMenuContent className="w-56">
<ContextMenuGroup>
<ContextMenuGroupLabel>Panel Position</ContextMenuGroupLabel>
<ContextMenuRadioGroup onValueChange={setPosition} value={position}>
<ContextMenuRadioItem value="top">Top</ContextMenuRadioItem>
<ContextMenuRadioItem value="bottom">Bottom</ContextMenuRadioItem>
<ContextMenuRadioItem value="right">Right</ContextMenuRadioItem>
<ContextMenuRadioItem value="left">Left</ContextMenuRadioItem>
</ContextMenuRadioGroup>
</ContextMenuGroup>
</ContextMenuContent>
</ContextMenu>FAQ
How is the selection kept?
ContextMenuRadioGroup is controlled: value comes from state and onValueChange receives the new value.
How are the section labels added?
Each label is a ContextMenuGroupLabel at the top of a ContextMenuGroup with the items it names. The label isn't selectable; screen readers announce it as the group's name.
How is the choice announced?
Each option is a menu item radio, so screen readers say which one is checked; the mark is only visual.
What opens the menu?
A right-click inside the dashed area, which reads Right click here on a mouse and Long press here on a touch screen.
The area is ContextMenuTrigger; a long press on it opens the menu too.
Wrap your own row, file or canvas in the trigger instead.
How do keyboard and touch users find these actions?
The arrow keys move through an open menu, Enter runs an item and Escape closes it. A right-click is easy to miss, so also offer the same actions from a visible button, such as a Dropdown Menu.
API Reference
Context Menu
Sets onValueChange={setPosition}, value={position}, value="top", value="bottom", value="right" and value="left". The rest is on the Context Menu page.
