Shadcn Context Menu: Right-Click Menus for React Applications
The shadcn context menu brings desktop-style right-click menus to the browser. Wrap any element in a trigger and a right click, or a long press on touch devices, opens a positioned menu of actions built on the Radix UI context menu primitive and styled with Tailwind CSS. It is the react context menu pattern behind file managers, design canvases, and data-heavy admin tools.
The example on this page is a complete copy-paste context menu with grouped items, submenus, keyboard shortcut hints, separators, and checkbox and radio items. It is written in TypeScript and drops straight into a Next.js project as a starting point for your own action menus.
When a right-click menu makes sense
Context menus shine in productivity interfaces where users work on many objects: rows in a file list, cards on a board, nodes on a canvas, or messages in a thread. Right click puts copy, rename, duplicate, and delete directly under the cursor, which saves a trip to a toolbar and keeps the layout free of repeated buttons.
Because right click is invisible until tried, treat the menu as a shortcut layer, never the only path. Every action inside it should also exist somewhere discoverable, such as a row's dropdown menu button or a page toolbar.
Design guidelines
- Keep it contextual: Only show actions that apply to the element under the cursor. A menu of global commands belongs elsewhere.
- Order by frequency: Put the most used actions at the top and push destructive ones to the bottom behind a separator.
- Show shortcut hints: Right-click users tend to be power users, so displaying shortcuts in the menu teaches the faster path.
- Limit submenu depth: One level of nesting is fine. Two levels of submenus become hard to traverse with a mouse.
- Disable rather than remove: Keeping unavailable items visible but disabled preserves a stable menu layout users can memorize.
What the component handles for you
- Pointer-relative positioning: The menu opens exactly at the cursor and flips automatically near viewport edges.
- Long-press on touch: Touch devices open the menu with a press and hold, so the pattern is not mouse-only.
- Full keyboard navigation: Arrow keys, typeahead, Enter, and Escape all work, following the WAI-ARIA menu pattern.
- Rich item types: Checkbox items, radio groups, labels, separators, and nested submenus are all built in.
Pairing with other components
Context menus pair naturally with a table or data table, where right clicking a row exposes edit, duplicate, and delete. On kanban boards, wrap each card in a trigger so actions stay off the card face.
Destructive items should hand off to an alert dialog for confirmation instead of deleting immediately. For persistent application-level commands, a menubar is the complementary pattern that stays visible at all times.
Primitive support
This component is built on the Radix UI Context Menu primitive, which owns the right-click interception, cursor positioning, collision handling, and menu keyboard semantics. The shadcn context menu docs show the full part list, from trigger to submenu content.
A matching unstyled implementation exists as the Base UI Context Menu, so teams on Base UI can reuse the same Tailwind CSS styling approach shown here with a slightly different component anatomy.