Context Menu

Right click here

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/context-menu.json

npx shadcn@latest add https://prototyper-ui.com/r/context-menu.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/context-menu.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/context-menu.json

This will add the following files to your project:

components/ui/context-menu.tsx

Usage

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Item 1</ContextMenuItem>
    <ContextMenuItem>Item 2</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Anatomy

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuLabel />
    <ContextMenuSeparator />
    <ContextMenuGroup>
      <ContextMenuItem />
    </ContextMenuGroup>
    <ContextMenuCheckboxItem />
    <ContextMenuRadioGroup>
      <ContextMenuRadioItem />
    </ContextMenuRadioGroup>
    <ContextMenuSub>
      <ContextMenuSubTrigger />
      <ContextMenuSubContent>
        <ContextMenuItem />
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Sub-component	`data-slot`	Purpose	Required
`ContextMenu`	`context-menu`	Root provider, manages open/close state	Yes
`ContextMenuTrigger`	`context-menu-trigger`	Element that opens the menu on right click	Yes
`ContextMenuPortal`	`context-menu-portal`	Renders children into a portal	No
`ContextMenuContent`	`context-menu-content`	The popup panel containing menu items	Yes
`ContextMenuGroup`	`context-menu-group`	Groups related menu items	No
`ContextMenuLabel`	`context-menu-label`	Non-interactive label for a group	No
`ContextMenuItem`	`context-menu-item`	Individual actionable menu item	Yes
`ContextMenuCheckboxItem`	`context-menu-checkbox-item`	Toggleable checkbox menu item	No
`ContextMenuRadioGroup`	`context-menu-radio-group`	Groups radio menu items	No
`ContextMenuRadioItem`	`context-menu-radio-item`	Radio-selectable menu item	No
`ContextMenuSeparator`	`context-menu-separator`	Visual separator between items	No
`ContextMenuShortcut`	`context-menu-shortcut`	Keyboard shortcut hint text	No
`ContextMenuSub`	`context-menu-sub`	Root for a submenu	No
`ContextMenuSubTrigger`	`context-menu-sub-trigger`	Item that opens a submenu	No
`ContextMenuSubContent`	`context-menu-sub-content`	Submenu popup panel	No

Examples

Basic

Right click here

Styling

Data Slots

Use data-slot attributes to target specific parts of the context menu:

Slot name	Element
`context-menu`	Root provider (no DOM rendered)
`context-menu-trigger`	The trigger element
`context-menu-portal`	Portal wrapper
`context-menu-content`	The popup panel
`context-menu-group`	Group wrapper
`context-menu-label`	Group label
`context-menu-item`	Individual menu item
`context-menu-checkbox-item`	Checkbox menu item
`context-menu-radio-group`	Radio group wrapper
`context-menu-radio-item`	Radio menu item
`context-menu-separator`	Visual separator line
`context-menu-shortcut`	Keyboard shortcut text
`context-menu-sub`	Submenu root
`context-menu-sub-trigger`	Submenu trigger item
`context-menu-sub-content`	Submenu popup panel

Customization Examples

/* Change menu item highlight color */
[data-slot="context-menu-item"][data-highlighted] {
  @apply bg-primary text-primary-foreground;
}

/* Wider menu popup */
[data-slot="context-menu-content"] {
  @apply min-w-[12rem];
}

{/* Override styles via className */}
<ContextMenuContent className="w-64">
  <ContextMenuItem className="font-medium">
    Custom Item
  </ContextMenuItem>
</ContextMenuContent>

API Reference

ContextMenu

Root component that manages open/close state. Opens on right-click of the trigger.

Prop

Type

All Base UI ContextMenu.Root props are forwarded via ...props.

ContextMenuTrigger

Element that opens the context menu when right-clicked.

Prop

Type

All Base UI ContextMenu.Trigger props are forwarded via ...props.

ContextMenuContent

The popup panel containing menu items, rendered inside a portal with a positioner.

Prop

Type

All Base UI ContextMenu.Popup props are forwarded via ...props.

ContextMenuGroup

Groups related menu items together.

All Base UI ContextMenu.Group props are forwarded via ...props.

ContextMenuLabel

Non-interactive label for a group of menu items.

Prop

Type

All Base UI ContextMenu.GroupLabel props are forwarded via ...props.

ContextMenuItem

Individual actionable menu item.

Prop

Type

All Base UI ContextMenu.Item props are forwarded via ...props.

ContextMenuCheckboxItem

Toggleable checkbox menu item with a check indicator.

Prop

Type

All Base UI ContextMenu.CheckboxItem props are forwarded via ...props.

ContextMenuRadioGroup

Groups radio menu items for single-selection behavior.

All Base UI ContextMenu.RadioGroup props are forwarded via ...props.

ContextMenuRadioItem

Radio-selectable menu item within a radio group.

Prop

Type

All Base UI ContextMenu.RadioItem props are forwarded via ...props.

ContextMenuSeparator

Visual separator between menu items or groups.

Prop

Type

All Base UI ContextMenu.Separator props are forwarded via ...props.

ContextMenuShortcut

Displays a keyboard shortcut hint aligned to the right of a menu item.

Prop

Type

All standard span props are forwarded via ...props.

ContextMenuSub

Root provider for a submenu.

All Base UI ContextMenu.SubmenuRoot props are forwarded via ...props.

ContextMenuSubTrigger

Menu item that opens a submenu on hover or keyboard navigation.

Prop

Type

All Base UI ContextMenu.SubmenuTrigger props are forwarded via ...props.

ContextMenuSubContent

Popup panel for a submenu, rendered inside a portal with a positioner.

Prop

Type

All ContextMenuContent props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Space`	Activates the focused menu item
`Enter`	Activates the focused menu item
`ArrowDown`	Moves focus to the next menu item
`ArrowUp`	Moves focus to the previous menu item
`ArrowRight`	Opens a submenu when focused on a sub-trigger
`ArrowLeft`	Closes a submenu and returns focus to the parent trigger
`Escape`	Closes the menu
`Home`	Moves focus to the first menu item
`End`	Moves focus to the last menu item

ARIA Attributes

ContextMenuContent receives role="menu".
ContextMenuItem receives role="menuitem".
ContextMenuCheckboxItem receives role="menuitemcheckbox" with aria-checked.
ContextMenuRadioItem receives role="menuitemradio" with aria-checked.
ContextMenuSub content receives role="menu" for nested menus.
data-disabled is set on disabled items, which sets aria-disabled.
Focus is managed within the menu and returns to the trigger area when the menu closes.

On this page