Context Menu
Opens a custom action menu right at the cursor position when users right-click or long-press an element on the screen.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-context-menuUsage
import {
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuGroup,
ContextMenuGroupLabel,
ContextMenuItem,
ContextMenuLinkItem,
ContextMenuPopup,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubPopup,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from '@/components/ui/context-menu'<ContextMenu>
<ContextMenuTrigger className="flex h-32 items-center justify-center rounded-lg border border-dashed">
Right click here
</ContextMenuTrigger>
<ContextMenuPopup>
<ContextMenuItem>Back</ContextMenuItem>
<ContextMenuItem>Forward</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuLinkItem render={<Link href="/docs" />}>Documentation</ContextMenuLinkItem>
<ContextMenuSeparator />
<ContextMenuSub>
<ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
<ContextMenuSubPopup>
<ContextMenuItem>Inspect</ContextMenuItem>
<ContextMenuItem>View source</ContextMenuItem>
</ContextMenuSubPopup>
</ContextMenuSub>
</ContextMenuPopup>
</ContextMenu>Anatomy
<ContextMenu>
<ContextMenuTrigger />
<ContextMenuPopup>
<ContextMenuItem />
<ContextMenuSeparator />
<ContextMenuSub>
<ContextMenuSubTrigger />
<ContextMenuSubPopup />
</ContextMenuSub>
</ContextMenuPopup>
</ContextMenu>Accessibility
- Follows the WAI-ARIA Menu Pattern.
- Activated on right-click or long-press, with full keyboard traversal.
Keyboard Interactions
| Key | Action |
|---|---|
| ArrowDown / ArrowUp | Navigates through context menu options. |
| ArrowRight / ArrowLeft | Opens and closes submenus. |
| Escape | Dismisses the context menu. |
API Reference
ContextMenu
Root component. Alias for ContextMenu.Root from Base UI.
ContextMenuTrigger
An area that opens the menu on right click or long press. Renders a <div> element.
ContextMenuPopup
Popup container that displays the menu content at the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
side | top|bottom|left|right | bottom | Side of the anchor to position the popup |
align | start|center|end | center | Alignment relative to the anchor |
sideOffset | number | 4 | Distance from the anchor in pixels |
alignOffset | number | - | Offset along the alignment axis |
anchor | Element|null|React.RefObject<Element> | - | Custom anchor element or ref to anchor the popup against |
portalProps | ContextMenu.Portal.Props | - | Props forwarded to the internal portal (keepMounted, container, etc.); see Base UI Context Menu portal API |
ContextMenuGroup
Groups related menu items. Alias for ContextMenu.Group from Base UI.
ContextMenuItem
Individual menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
variant | default|destructive | default | Controls the item styling |
Using inset: When mixing items with and without icons, use inset on icon-less items to maintain alignment:
<ContextMenuItem><PencilIcon /> Edit</ContextMenuItem>
<ContextMenuItem inset>Properties</ContextMenuItem>ContextMenuLinkItem
Link menu item for navigation. LinkItem renders a native <a> when you pass href. Styled like ContextMenuItem.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
variant | default|destructive | default | Controls the item styling |
closeOnClick | boolean | true | Whether the menu closes when the link is clicked |
If you were using ContextMenuItem render={<Link href="..." />}, migrate to ContextMenuLinkItem but keep render — do not replace it with href alone when using a router Link.
<ContextMenuLinkItem render={<Link href="/docs" />}>Docs</ContextMenuLinkItem>Use href only for plain anchor links:
<ContextMenuLinkItem href="/docs">Docs</ContextMenuLinkItem>ContextMenuCheckboxItem
Checkbox menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|switch | default | Display style - switch shows a toggle switch indicator |
ContextMenuRadioGroup
Groups radio menu items. Alias for ContextMenu.RadioGroup from Base UI.
ContextMenuRadioItem
Radio menu item. Styled wrapper for ContextMenu.RadioItem from Base UI.
ContextMenuGroupLabel
Label for a menu group.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
ContextMenuSeparator
Visual separator between menu items.
ContextMenuShortcut
Displays keyboard shortcut text. Custom component (not a Base UI wrapper).
ContextMenuSub
Submenu container. Alias for ContextMenu.SubmenuRoot from Base UI.
ContextMenuSubTrigger
Trigger for opening a submenu.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
ContextMenuSubPopup
Popup for submenu content.
| Prop | Type | Default | Description |
|---|---|---|---|
align | start|center|end | start | Alignment relative to the trigger |
sideOffset | number | 0 | Distance from the trigger in pixels |
alignOffset | number | -5 | Offset along the alignment axis. Defaults to -5 when align is not "center" |
Examples
On This Page