shadcn.io is not affiliated with official shadcn/ui
Context Menu examples · Standard
Simple Context Menu for React
A right-click area that opens Back, Forward, Reload and More Options.
The smallest context menu: right-click the area and four plain items appear, Back, Forward, Reload and More Options. Start here and add icons, shortcuts and groups as the menu grows.
Preview
Installation
FAQ
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.
Which parts make up the menu?
ContextMenu, the trigger, the popup and four ContextMenuItems in one ContextMenuGroup. Nothing else is needed for a flat list.
How do I run an action when an item is chosen?
Pass onClick to each ContextMenuItem.
The menu closes after the action runs.
Does it replace the browser's menu?
Inside the trigger, yes: a right-click there opens this menu instead of the browser's. Keep the trigger to the area that needs custom actions.
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 SeparatorsA context menu that separates Edit, the
- Context Menu with Icons and ShortcutsA context menu whose items each have an
- Context Menu with LabelsA context menu with My Account and
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Context Menu with CheckboxesA context menu of view options that
- Context Menu with Radio ItemsA context menu that picks one Panel