React Context Menu Component Examples

The default Context Menu wraps any region with a Trigger and renders the menu list inside Content. Right-click anywhere inside the trigger and the menu opens at the cursor; click outside or press Escape and it closes. Pass an icon prop on Item and the source renders it via React.isValidElement(Icon) ? Icon : <Icon className="w-4 h-4" />, so you can hand it either a component reference (icon={Copy}) or a fully styled element (icon={<Copy className="w-4 h-4 text-blue-500" />}). The structure mirrors the Context Menu docs usage and matches what npx drivn add context-menu writes into your project.

The shortcut prop on Item renders a right-aligned muted span — the source applies ml-auto text-xs text-muted-foreground so the hint sits opposite the label inside the same row. The text is purely visual; there is no key handling attached. Pair it with the actual hotkey logic in your app — a useEffect that listens for keydown and dispatches the same handler the menu item triggers. The shortcut string supports any glyph including the macOS Command symbol ⌘, Control ⌃, Shift ⇧, and Option ⌥. The example below renders ⌘X, ⌘C, and ⌘V next to Cut, Copy, and Paste — the canonical clipboard set most editor menus expose.

Submenus open on hover, and the whole mechanism is a pair of Tailwind classes. Sub renders relative group/sub. SubContent starts at opacity-0 invisible and carries group-hover/sub:opacity-100 plus group-hover/sub:visible, so hovering the parent row flips both at once. The panel itself sits at absolute left-full top-0 with min-w-[180px], which lands it flush against the right edge of the parent menu. No timer, no click handler, no extra state — a transition-[opacity,visibility] duration-150 handles the fade, easing in by default and switching to ease-out on hover via group-hover/sub:ease-out.

SubTrigger appends <ChevronRight className="ml-auto w-4 h-4" /> after its children, so the expandable affordance is automatic and you never pass the chevron yourself. It also accepts the same icon prop as Item, which is how the example below puts a FolderOpen glyph on the Refactor row. Nesting another Sub inside a SubContent repeats the same two classes one level down — see the Context Menu docs for the full subcomponent list.

Two boolean props handle the most common item states. destructive swaps in red-tinted styles via text-destructive hover:bg-destructive/10 — the right look for irreversible actions like Delete or Remove. disabled applies opacity-50 pointer-events-none and forwards the disabled attribute to the underlying <button>, so the row neither reacts to hover nor fires onClick. Both flags compose with icon and shortcut so a destructive shortcut item like ⌘⌫ Delete reads the way users expect. The styles object lives at the top of the source file — see the Context Menu docs if you want to add a third state like "warning" by extending styles and threading a new prop through Item.

Group and Label partition the menu into themed sections. Label renders a small uppercase-feel header via px-3 py-1.5 text-xs font-medium text-muted-foreground — visually distinct from items but inside the same flow. Group wraps related items with py-1 so adjacent groups breathe without needing a hard Separator. Use this pattern when the menu carries enough actions that scanning by category becomes faster than reading top to bottom — for a notes app you might split History (Undo, Redo) from Format (Bold, Italic) from Actions (Share, Delete). After the basic installation, the same pattern works for both inline and submenu variants.