Context Menu
Basic Usage
Right-click the area below
Right click here
Installation
pnpm add @corew500/uiUsage
import { ContextMenu } from "@corew500/ui/context-menu"
<ContextMenu>Content</ContextMenu>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onOpenChange | (open: boolean, eventDetails: ContextMenuRootChangeEventDetails) => void | — | Event handler called when the menu is opened or closed. |
| defaultOpen | enum | false | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead. |
| loopFocus | enum | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| highlightItemOnHover | enum | true | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. |
| onOpenChangeComplete | (open: boolean) => void | — | Event handler called after any animations complete when the menu is closed. |
| open | enum | — | Whether the menu is currently open. |
| orientation | enum | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
| disabled | enum | false | Whether the component should ignore user interaction. |
| closeParentOnEsc | enum | false | When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. |
| actionsRef | RefObject<MenuRootActions> | — | A ref to imperative actions. - `unmount`: When specified, the menu will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the menu manually. Useful when the menu's animation is controlled by an external library. - `close`: When specified, the menu can be closed imperatively. |
| triggerId | string | — | ID of the trigger that the popover is associated with. This is useful in conjunction with the `open` prop to create a controlled popover. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set). |
| defaultTriggerId | string | — | ID of the trigger that the popover is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. |
| handle | MenuHandle<unknown> | — | A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu's open state. |
Accessibility
Keyboard Navigation
- Arrow keys navigate items, Enter/Space selects.
- Escape closes the menu.
Focus Management
- Focus returns to trigger on close.
Additional
- - Opens on right-click or Shift+F10.
Localization
Translatable Content
- - All menu item labels should be translated.