shadcn.io is not affiliated with official shadcn/ui
Context Menu examples · Standard
Context Menu with Checkboxes for React
A context menu of view options that toggle on and off, such as Show Bookmarks Bar.
Three view options, Show Bookmarks Bar, Show Full URLs and Show Sidebar, each with a check mark when it is on. Use checkbox items for settings that are independent of each other.
Preview
Installation
FAQ
How are the checked states kept?
Each ContextMenuCheckboxItem is uncontrolled, with defaultChecked on Show Bookmarks Bar and Show Sidebar. Pass checked and onCheckedChange to control them.
How is the state announced?
Each item is a menu item checkbox, so screen readers say whether it is checked; the check 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 Radio ItemsA context menu that picks one Panel
- Context Menu with LabelsA context menu with My Account and
- Simple Context MenuA right-click area that opens Back
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Context Menu with Icons and ShortcutsA context menu whose items each have an
- Context Menu with SeparatorsA context menu that separates Edit, the