shadcn.io is not affiliated with official shadcn/ui
Context Menu examples · Standard
Context Menu with Radio Items for React
A context menu that picks one Panel Position, Top, Bottom, Right or Left, from a radio group.
A Panel Position label over four choices, Top, Bottom, Right and Left, with Bottom selected. Choosing one moves the mark to it. Use radio items when exactly one option applies.
Preview
Installation
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.
Related
- Context Menu with CheckboxesA context menu of view options that
- Context Menu with LabelsA context menu with My Account and
- Text Alignment Menu Context MenuA text context menu with an Align Text
- Simple Context MenuA right-click area that opens Back
- Context Menu with Icons and ShortcutsA context menu whose items each have an
- Context Menu with SeparatorsA context menu that separates Edit, the