Context Menu
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.
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
Description
You can add details to menu items by using the ContextMenuDescription component.
Danger
Designate a menu item as dangerous.
With icon
Enhance context menu item by adding icons.
Separator
Separate context menu items with a separator.
Context sub menu
Sorry, this component doesn't exist yet. It's on our roadmap.
Disabled
Disable specific menu items.
Also, you can disable items directly in MenuContent by using the disabledKeys prop.
<ContextMenuContent disabledKeys={['gsu']} />Component API
ContextMenu
ContextMenu is a custom React context provider and does not extend a React Aria component.
ContextMenuTrigger
ContextMenuTrigger extends the native <button> element.
classNamestringContextMenuContent
ContextMenuContent extends the Intent UI <MenuContent> component.
classNamestringContextMenuHeader
ContextMenuHeader extends the Intent UI <MenuHeader> component.
classNamestringseparatorbooleanfalseContextMenuItem
ContextMenuItem extends the Intent UI <MenuItem> component.
classNamestringintent"danger" | "warning"ContextMenuLabel
ContextMenuLabel extends the Intent UI <MenuLabel> component.
classNamestringContextMenuDescription
ContextMenuDescription extends the Intent UI <MenuDescription> component.
classNamestringContextMenuSection
ContextMenuSeparator
ContextMenuSeparator extends the Intent UI <MenuSeparator> component.
classNamestringContextMenuShortcut
ContextMenuShortcut extends the Intent UI <MenuShortcut> component.
classNamestring