build69
build69  /  Components  /  Overlays  /  ContextMenu

ContextMenu

v1.0.10Updated 4 Oct 2026

Right-click / long-press menu built on Radix ContextMenu, styled 1:1 with DropdownMenu: identical item anatomy (icon / label / description / Kbd shortcut), checkbox and radio items, nested submenus, separators, labels an

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedmenucontextright-clicklong-press+5

The default, out-of-the-box ContextMenu.

Recommended for+14
  • ✓Row/table right-click actions
  • ✓File or card grids
  • ✓Canvas / editor surfaces
  • ✓Anywhere a DropdownMenu exists but the trigger is a surface, not a button
Tags+6
menucontextright-clicklong-pressactionsnestedkbdradixdefault
Features+4
  • Opens on right-click, long-press (touch), and Shift+F10 / Menu key on a focused trigger
  • Nested submenus
  • Checkbox / radio items
  • Keyboard shortcuts (Kbd hints)
  • Separators + inset alignment
  • Destructive tone
  • Declarative items array (same MenuItem[] as DropdownMenu)
  • Sizes sm / md / lg (declarative mode)
  • Reduced-motion safe animations
Not recommended for−2
  • ✕Click-to-open button menus (use DropdownMenu)
  • ✕Primary navigation (use Sidebar)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ContextMenu" })

Usage

import { ContextMenu } from '@/components/overlays/context-menu';

<ContextMenu trigger={<div tabIndex={0}>Right-click me</div>} items={items} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
trigger

Pro: right-click surface (single element, rendered via Trigger asChild)

ReactNode—
items

Pro: declarative menu items — same shape as DropdownMenu

MenuItem[]—
size

Pro: item density

'sm' | 'md' | 'lg'—
width

Pro: menu width (anchors to pointer, so no match-trigger)

number | 'auto'—

Related

Platform docsAll componentsSource files