Context Menu
Wrap the target and Menu content in MenuTrigger with trigger="contextMenu".
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/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
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react cn
Anatomy
import {
MenuTrigger,
Menu,
MenuItem,
MenuSeparator,
MenuShortcut,
} from '@/components/ui/menu'
import { Pressable } from 'react-aria-components'<MenuTrigger trigger="contextMenu">
<Pressable>
<div
role="button"
className="flex aspect-video w-56 items-center justify-center rounded-xl border border-dashed text-sm"
>
<span className="hidden pointer-fine:inline-block">Right click here</span>
<span className="hidden pointer-coarse:inline-block">Long press here</span>
</div>
</Pressable>
<Menu className="min-w-56">
<MenuItem>Back</MenuItem>
<MenuItem isDisabled>Forward</MenuItem>
<MenuItem>Reload</MenuItem>
<MenuSeparator />
<MenuItem>Bookmark</MenuItem>
<MenuItem>Save as</MenuItem>
<MenuItem>
Select all
<MenuShortcut>⌘A</MenuShortcut>
</MenuItem>
<MenuSeparator />
<MenuItem>View source</MenuItem>
<MenuItem>Inspect Accessibility</MenuItem>
<MenuItem>Inspect</MenuItem>
</Menu>
</MenuTrigger>Examples
Item description
Add supporting details to a menu item with MenuDescription.
Danger
Use the danger intent for destructive actions.
Icons
Add icons to make actions easier to identify.
Separator
Use MenuSeparator to divide related groups of actions.
Submenu
Nest another menu with MenuSubMenu.
Disabled
Disable individual items with isDisabled.
You can also disable multiple items from Menu with disabledKeys.
<Menu disabledKeys={['gsu']} />Component API
Context menus use the same components and props as Menu.
Set trigger="contextMenu" on MenuTrigger to open the menu on right click or long press. Use MenuSubMenu for nested menus. Configure positioning through the Menu component's placement and popover props.
<Menu placement="bottom start" popover={{ offset: 4, crossOffset: 0 }}>
<MenuItem>Open</MenuItem>
</Menu>