Context Menu

The context menu opens on right-click and lists actions scoped to the element under the cursor. Use it for row actions in a table, canvas or editor commands, or any desktop-style secondary menu; for a button-triggered menu, use Dropdown Menu instead.

Preview#

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

Installation#

npxnpx shadcn@latest add @cubby-ui/context-menu

Usage#

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

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuItem />
  </ContextMenuContent>
</ContextMenu>

Composition#

ContextMenuFilter          (optional, enables filtering)
ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuInput       (with filtering)
    ├── ContextMenuEmpty       (with filtering)
    ├── ContextMenuList        (with filtering, wraps the items)
    ├── ContextMenuLabel
    ├── ContextMenuItem
    ├── ContextMenuLinkItem
    ├── ContextMenuCheckboxItem
    ├── ContextMenuRadioGroup
    │   └── ContextMenuRadioItem
    ├── ContextMenuGroup
    │   ├── ContextMenuGroupLabel
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuShortcut
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent

Examples#

With Submenus#

Nest a ContextMenuSub to open a second menu from a trigger item.

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
  ContextMenuSeparator,

With Separators and Shortcuts#

Use ContextMenuSeparator to divide groups and ContextMenuShortcut to show key hints.

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
  ContextMenuSeparator,

With Checkboxes and Radio Groups#

Use ContextMenuCheckboxItem for toggles and ContextMenuRadioGroup for single-choice options. Both put their indicator in a reserved column on the right, so labels stay put as items toggle.

"use client"
 
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,

With Switch#

Set indicator="switch" on ContextMenuCheckboxItem to swap the checkmark for a switch. Visual only: the item keeps its menuitemcheckbox role, the row stays the click target, and the menu stays open on toggle.

"use client";
 
import { useState } from "react";
 
import {
  ContextMenu,

With Filter#

Wrap a ContextMenuSub (or the whole ContextMenu) in ContextMenuFilter, then put a ContextMenuInput above a ContextMenuList to filter items as you type. Add p-0 to that content's className; the field and list bring their own spacing. The parts work like Dropdown Menu's.

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuEmpty,
  ContextMenuFilter,
  ContextMenuInput,

API Reference#

ContextMenuContent#

ContextMenuItem#

ContextMenuLinkItem#

Menu item that renders as an anchor (<a>) for navigation links. Wraps Base UI's ContextMenu.LinkItem.

ContextMenuCheckboxItem#

Toggleable menu item. Wraps Base UI's ContextMenu.CheckboxItem. The indicator sits in a reserved column on the right.

ContextMenuRadioItem#

Mutually exclusive menu item. Wraps Base UI's ContextMenu.RadioItem. Uses the same right-aligned checkmark as ContextMenuCheckboxItem.

ContextMenuLabel#

ContextMenuGroupLabel#

ContextMenuSubTrigger#

ContextMenuSubContent#

ContextMenuFilter#

Enables filtering for the ContextMenu or ContextMenuSub it wraps. Wraps Base UI's Menu.FilterProvider, which works because ContextMenu renders a Menu root inside.

ContextMenuInput#

Search field above ContextMenuList, built like DropdownMenuInput. Props are forwarded to Menu.Input.

ContextMenuList, ContextMenuEmpty, ContextMenuClear#

These work like Dropdown Menu's: the list scrolls below the field in a ScrollArea (its className goes there), the empty message shows when nothing matches, and the clear button empties the query.

Additional Props#

ContextMenu components inherit all props from Base UI Context Menu, including open, defaultOpen, onOpenChange, positioning options, and accessibility props.