Context Menu

Wrap the target and menu content in ContextMenu. A separate trigger component is not required.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/context-menu

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

menu

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

Examples

Item description

Add supporting details to a menu item with ContextMenuDescription.

Danger

Use the danger intent for destructive actions.

Icons

Add icons to make actions easier to identify.

Separator

Use ContextMenuSeparator to divide related groups of actions.

Submenu

Nest another menu with ContextMenuSub.

Disabled

Disable individual items with isDisabled.

You can also disable multiple items from ContextMenuContent with disabledKeys.

<ContextMenuContent disabledKeys={['gsu']} />

Component API

ContextMenu

ContextMenu extends the React Aria Components <MenuTrigger> component and opens its menu at the pointer position.

classNamestring
onOpenChange(isOpen: boolean) => void

ContextMenuContent

ContextMenuContent extends the Intent UI <MenuContent> component.

classNamestring
placementPlacement
Default: "bottom start"
offsetnumber
Default: 4
crossOffsetnumber
Default: 0

ContextMenuSub

ContextMenuSub extends the Intent UI <MenuSubMenu> component.

delaynumber
Default: 0

ContextMenuHeader

ContextMenuHeader extends the Intent UI <MenuHeader> component.

classNamestring
separatorboolean
Default: false

ContextMenuItem

ContextMenuItem extends the Intent UI <MenuItem> component.

classNamestring
intent"danger" | "warning"

ContextMenuLabel

ContextMenuLabel extends the Intent UI <MenuLabel> component.

classNamestring

ContextMenuDescription

ContextMenuDescription extends the Intent UI <MenuDescription> component.

classNamestring

ContextMenuSection

ContextMenuSection extends the Intent UI <MenuSection> component.

classNamestring
labelstring

ContextMenuSeparator

ContextMenuSeparator extends the Intent UI <MenuSeparator> component.

classNamestring

ContextMenuShortcut

ContextMenuShortcut extends the Intent UI <MenuShortcut> component.

classNamestring
Design
Command Menu
Keyboard