Context Menu

When to UseCopy Anchor Link

• to repeat, at the pointer, the actions that a row, a card, or a file already shows, such as “Open”, “Duplicate”, “Rename”, and “Delete”
• to change the view settings of the area under the pointer, with checkbox and radio items, like “Show comments” or the row density

When Not to UseCopy Anchor Link

• as the only way to reach an action (show the same actions in a Dropdown Menu)
• to wrap text that users copy, as the trigger sets select-none and its text can’t be selected

See Dropdown Menu for a comparison of the four menus.

AnatomyCopy Anchor Link

A Context Menu has two parts. The trigger is the area that users right-click, and it has no style of its own. The popup contains the item types of a Dropdown Menu under the ContextMenu prefix.

BehaviorCopy Anchor Link

A Context Menu is modal: while it is open, Base UI locks the page’s scroll and prevents clicks from reaching the page. Unlike a Dropdown Menu, it has no modal prop.

By default, the menu opens at the pointer. If the menu doesn’t fit there, Base UI moves it. If you don’t set a width, the menu is as wide as its longest item, with a minimum width of 144px.

AccessibilityCopy Anchor Link

The roles of the items and the keys inside the menu are the same as in a Dropdown Menu.

KeyboardCopy Anchor Link

RequirementsCopy Anchor Link

ContextMenuContent has role="menu" and no accessible name unless you set one.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/context-menu

UsageCopy Anchor Link

ContextMenuTrigger renders a div around its children. To run an action from an item, pass it to onClick.

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

<ContextMenu>
    <ContextMenuTrigger className="rounded-xl border p-4">INV-2026-014</ContextMenuTrigger>
    <ContextMenuContent className="w-48">
        <ContextMenuItem onClick={open}>Open</ContextMenuItem>
        <ContextMenuItem onClick={duplicate}>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive" onClick={remove}>
            Delete
        </ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>;

With a Dropdown MenuCopy Anchor Link

To show the same actions in a Dropdown Menu, list the actions once and render them in both menus. Place the Dropdown Menu next to the Context Menu, not inside its trigger. See the Base UI Context Menu documentation for this pattern.

const actions = [
    { label: 'Open', run: open },
    { label: 'Duplicate', run: duplicate },
];

<div className="relative">
    <ContextMenu>
        <ContextMenuTrigger className="rounded-xl border p-4">INV-2026-014</ContextMenuTrigger>
        <ContextMenuContent className="w-40">
            {actions.map(({ label, run }) => (
                <ContextMenuItem key={label} onClick={run}>
                    {label}
                </ContextMenuItem>
            ))}
        </ContextMenuContent>
    </ContextMenu>
    <DropdownMenu>
        <DropdownMenuTrigger
            render={
                <Button
                    variant="ghost"
                    size="icon-sm"
                    className="absolute end-2 top-2"
                    aria-label="Actions for INV-2026-014"
                />
            }
        >
            <DotsThreeIcon weight="bold" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-40">
            {actions.map(({ label, run }) => (
                <DropdownMenuItem key={label} onClick={run}>
                    {label}
                </DropdownMenuItem>
            ))}
        </DropdownMenuContent>
    </DropdownMenu>
</div>;

API ReferenceCopy Anchor Link

Apart from ContextMenu, ContextMenuTrigger, and ContextMenuContent, the other exports are the parts of a Dropdown Menu under the ContextMenu prefix. variant and inset work as they do there.

The parts, except ContextMenuShortcut, accept the props of their matching parts in Base UI’s Context Menu. See the Base UI Context Menu documentation for open, onOpenChange, and disabled.

ContextMenuContentCopy Anchor Link