ContextMenu

Menu opened by right-click, long-press or the keyboard (Menu key, Shift+F10) on its trigger area. It reuses the dropdown-menu primitive anchored to the pointer, so roving focus, typeahead, submenu keys, Escape and collision handling come for free.

Import

import { ContextMenu } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/context-menu.

Usage

export const Default: Story = {
  render: () => (
    <div className="w-full max-w-md">
      <Area />
    </div>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
children *	ReactNode
onOpenChange	((open: boolean) => void)
defaultOpen	boolean	false	Starts open, anchored at position (viewport pixels). Useful for docs and visual tests.
position	{ x: number; y: number; }		Initial anchor point in viewport pixels. Defaults to the origin until the first right-click.

* marks a required prop.

Storybook stories

• Default
• Narrow
• Brutal Preset
• Open By Default

Source

packages/ui/src/overlays/context-menu/context-menu.tsx