Context Menu
Wrap the target and Menu content in MenuTrigger with trigger="contextMenu".
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/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 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>