Context Menu
The menu's popup, rows and submenus, opened at the pointer by a right-click or a long press.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/context-menu.json03API reference
19From the Base UI documentation
A component that creates a context menu activated by right clicking or long pressing. Doesn't render its own HTML element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | Whether the menu is initially open. To render a controlled menu, use the open prop instead. |
| open | boolean | - | Whether the menu is currently open. |
| onOpenChange | ((open: boolean, eventDetails: ContextMenu.Root.ChangeEventDetails) => void) | - | Event handler called when the menu is opened or closed. |
| highlightItemOnHover | boolean | 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. |
| actionsRef | React.RefObject<MenuRoot.Actions | null> | - | A ref to imperative actions. unmount: Manually unmounts the menu. Call this after any externally controlled closing animation finishes.close: When specified, the menu can be closed imperatively. |
| loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| onOpenChangeComplete | ((open: boolean) => void) | - | Event handler called after any animations complete when the menu is opened or closed. |
| disabled | boolean | false | Whether the component should ignore user interaction. |
| orientation | MenuRoot.Orientation | 'vertical' | The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. |
| children | React.ReactNode | - | - |