Users building dashboards, file managers, and data-rich UIs need context menus that don't require custom event handling, positioning math, or managing open state manually. Without a composable, stable component, devs resort to ad-hoc event listeners, inline positioning logic, and brittle menu markup that breaks when viewports shrink or themes change.

ContextMenu is a compound component with controlled state and stable subcomponents: ContextMenu.Trigger wraps content that triggers on right-click, ContextMenu.Content renders the portal-ed menu with automatic viewport clamping, ContextMenu.Item is a menuitem button with onClick, disabled, and danger variants, ContextMenu.Separator adds visual dividers, and ContextMenu.Sub + ContextMenu.SubTrigger + ContextMenu.SubContent enable nested submenus with one-open-at-a-time sibling coordination. Each item carries a data-react-fancy-context-menu-* handle; the menu is bridgeable via the stable open state on the root context.

Import ContextMenu from @particle-academy/react-fancy, wrap your content in <ContextMenu><ContextMenu.Trigger>{content}</ContextMenu.Trigger><ContextMenu.Content><ContextMenu.Item onClick={() => ...}>Action</ContextMenu.Item></ContextMenu.Content></ContextMenu>, and optionally add <ContextMenu.Sub> for nested menus. Agents read/write the menu's open state via the useContextMenu() hook to inspect or alter menu visibility.