build69
build69  /  Components  /  Overlays  /  ContextMenu

ContextMenu

v1.0.6Updated 27 Aug 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

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