Context Menu

A composable context menu built on Base UI's ContextMenu primitive. Supports items, checkbox items, radio items, submenus, keyboard shortcuts, separators, and grouped sections.

Right click here

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

export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>Ctrl+[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Forward
          <ContextMenuShortcut>Ctrl+]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>Ctrl+R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Save As...</ContextMenuItem>
        <ContextMenuItem>Print</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Anatomy

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Cut</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

<ContextMenu>
  <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-md border border-dashed">
    Right-click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Back <ContextMenuShortcut>Alt+Left</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Forward <ContextMenuShortcut>Alt+Right</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Reload</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With checkbox and radio items

<ContextMenu>
  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
      Show Bookmarks
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem checked={showUrls} onCheckedChange={setShowUrls}>
      Show Full URLs
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>Layout</ContextMenuLabel>
    <ContextMenuRadioGroup value={layout} onValueChange={setLayout}>
      <ContextMenuRadioItem value="grid">Grid</ContextMenuRadioItem>
      <ContextMenuRadioItem value="list">List</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

With submenus

<ContextMenu>
  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>New File</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Email</ContextMenuItem>
        <ContextMenuItem>Slack</ContextMenuItem>
        <ContextMenuItem>Copy Link</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With inset items and labels

Use inset to align items that do not have a leading icon with those that do.

<ContextMenu>
  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel inset>Actions</ContextMenuLabel>
    <ContextMenuItem inset>Edit</ContextMenuItem>
    <ContextMenuItem inset>Duplicate</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem inset variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API Reference

ContextMenu

The root component. Manages open/closed state.

Prop	Type	Default
`children`	`ReactNode`	—

ContextMenuTrigger

The element that activates the context menu on right-click.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuContent

The popover panel that contains the menu items. Renders inside a portal with a positioner.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Preferred side relative to the cursor.
`sideOffset`	`number`	`0`	Distance in pixels from the cursor.
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment along the side axis.
`alignOffset`	`number`	`4`	Offset for alignment.
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuItem

A single menu action item.

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	The visual style. Destructive items are styled in red.
`inset`	`boolean`	—	Adds left padding to align with items that have a leading icon.
`disabled`	`boolean`	—	Whether the item is disabled.
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuCheckboxItem

A menu item with a checkbox. Shows a check icon when checked.

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the item is checked.
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when the checked state changes.
`inset`	`boolean`	—	Adds left padding for alignment.
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuRadioGroup

A group of radio items where only one can be selected.

Prop	Type	Default	Description
`value`	`string`	—	The currently selected value.
`onValueChange`	`(value: string) => void`	—	Callback when the selection changes.
`children`	`ReactNode`	—

ContextMenuRadioItem

A radio-style menu item. Shows a check icon when selected.

Prop	Type	Default	Description
`value`	`string`	—	The value of this radio item.
`inset`	`boolean`	—	Adds left padding for alignment.
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuLabel

A non-interactive label for a group of items.

Prop	Type	Default	Description
`inset`	`boolean`	—	Adds left padding for alignment.
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuSeparator

A horizontal divider between menu sections.

Prop	Type	Default
`className`	`string`	—

ContextMenuShortcut

A right-aligned keyboard shortcut hint displayed next to a menu item.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuGroup

A grouping container for related items.

Prop	Type	Default
`children`	`ReactNode`	—

ContextMenuSub

The root of a submenu. Manages the submenu's open/closed state.

Prop	Type	Default
`children`	`ReactNode`	—

ContextMenuSubTrigger

The item that opens a submenu. Renders a right-pointing chevron icon.

Prop	Type	Default	Description
`inset`	`boolean`	—	Adds left padding for alignment.
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuSubContent

The popover panel for a submenu. A pre-configured ContextMenuContent that opens to the right.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ContextMenuPortal

Renders children into a React portal.

Prop	Type	Default
`children`	`ReactNode`	—