Q: How do I build a table-row context menu?

Use the table variant. Wrap each row's content in ` ` with ` ` so the row IS the trigger. The menu inherits the row's data via closure or callback so actions know which row they're operating on. Pair with checkboxes for multi-select, then the context menu's actions can apply to all selected rows when fired from any one of them.

Q: How do I show submenus / nested menus?

Wrap a section's items in ` ` with a ` ` (renders with a ChevronRight automatically). Hover or arrow-right to open the submenu; arrow-left or move-away to close. Keep nesting to two levels — three is exhausting to navigate. Use submenus for grouped actions (Copy → Copy URL / Copy ID / Copy as JSON) rather than a flat list of every variant.

Question 1

What is a shadcn context menu?

Accepted Answer

A shadcn context menu is the right-click menu — the floating action list that appears when users right-click (or long-press on touch) a specific element. Think "Open in new tab" on a link, "Rename" on a file, "Insert row" on a table cell. It's built on Radix UI's ContextMenu primitive (right-click event capture, keyboard fallback via the Menu key, focus trap, ARIA wiring) and styled with shadcn/ui + Tailwind CSS.

Question 2

Are these context menu examples free?

Accepted Answer

Yes, every context menu example on shadcn.io is free for personal and commercial use. No attribution requirement, no runtime dependency, no gating.

Question 3

How is a context menu different from a dropdown menu?

Accepted Answer

Same UI primitive (Radix Menu), different trigger. DropdownMenu opens on left-click of a visible button — "Click ⋯ to see more options". ContextMenu opens on right-click anywhere inside a wrapped region — actions specific to that element. Use DropdownMenu when the trigger is the affordance (table column header, kebab button); use ContextMenu when the wrapped element IS the affordance (the table row itself, the file in a list, the canvas surface).

Question 4

Should I always provide a context menu when I have a dropdown?

Accepted Answer

If your power users right-click on the same element to access the same actions, yes — pair them. Render both `` (wrapping the row) and `` (anchored to a kebab button) with the same items. This is the pattern used by Linear, Notion, Figma. For mobile-first apps where right-click doesn't exist, ContextMenu adds little value — stick with DropdownMenu only.

Question 5

How do I build a table-row context menu?

Accepted Answer

Use the table variant. Wrap each row's content in `` with `` so the row IS the trigger. The menu inherits the row's data via closure or callback so actions know which row they're operating on. Pair with checkboxes for multi-select, then the context menu's actions can apply to all selected rows when fired from any one of them.

Question 6

How do I add a context menu to a canvas / drawing surface?

Accepted Answer

Use the canvas variant. Wrap the canvas element in `<ContextMenuTrigger>`. Capture the right-click coordinates relative to the canvas and pass them to the action handlers — "Add node here", "Paste at cursor". This is the Figma / Excalidraw pattern. Disable the browser's default context menu by spreading the trigger props, which call `event.preventDefault()` for you.

Question 7

How do I show submenus / nested menus?

Accepted Answer

Wrap a section's items in `` with a `` (renders with a ChevronRight automatically). Hover or arrow-right to open the submenu; arrow-left or move-away to close. Keep nesting to two levels — three is exhausting to navigate. Use submenus for grouped actions (Copy → Copy URL / Copy ID / Copy as JSON) rather than a flat list of every variant.

Question 8

How do I install a context menu example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/context-menu/…`, plus the shadcn/ui ContextMenu primitive (and its Radix dependency) if you don't already have them.

Question 9

How do I disable specific items conditionally?

Accepted Answer

Pass `disabled` to the ContextMenuItem when the action shouldn't be available — e.g. "Delete" disabled for read-only files. Disabled items render greyed out and don't fire onClick. For role-based action visibility (admin sees "Delete", viewer doesn't), conditionally render the ContextMenuItem instead of disabling it — invisibility is clearer than greyed-out for permission-gated actions.

Question 10

How do I keep the context menu working with mobile long-press?

Accepted Answer

Radix ContextMenu listens for the native `contextmenu` event, which mobile browsers fire on long-press by default. iOS Safari sometimes requires you to set `-webkit-touch-callout: none` on the wrapped element to suppress its system menu — Radix takes over from there. Test on real devices; mobile context menu UX is fiddly and worth verifying before shipping.

Question 11

Which libraries do context menu examples depend on?

Accepted Answer

Radix UI ContextMenu (the primitive — right-click event, focus trap, keyboard nav, ARIA), shadcn/ui ContextMenu (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons inside menu items). React 19 baseline. No state library — the menu manages its open state internally.

Question 12

Are context menu examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix wires the keyboard fallback automatically — pressing the Menu key (the one between Right Alt and Right Ctrl on most keyboards) opens the context menu for the focused element, with the same items, navigation, and dismissal. Screen readers announce the menu role + each item. For users without a Menu key, also expose the same items via a DropdownMenu so right-click isn't the only access path.

Question 13

Can I use these context menu examples with React Server Components?

Accepted Answer

ContextMenu is a client component (it captures right-click events and manages open state). Wrap it inside a Server Component parent and pass the wrapped content + actions as props. Per-row context menus on server-rendered tables work cleanly: render the table on the server, wrap each row in a small client-boundary that holds the ContextMenu.

React Context Menu Examples for shadcn/ui

Browse every context menu example

Frequently Asked Questions