Shadcn Context Menu

The shadcn context menu is a list of actions at the pointer. Right-click — or long-press — the trigger and the menu opens there. Use it for a file, a table row, or a canvas object. A button that should open a menu is a Dropdown Menu.

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

The trigger is the right-click target. onSelect on an item fires when they pick it, then the menu closes.

Composition

Basic

Back, Forward, Reload. Forward stays in the list, disabled.

Submenu

ContextMenuSub nests More Tools. Keep it one level.

Shortcuts

ContextMenuShortcut paints ⌘S. It does not bind the key.

Groups

ContextMenuGroup plus a separator. File, Edit, then the red row.

Icons

Icons sit in the item before the label.

Checkboxes

ContextMenuCheckboxItem for toggles that stack independently.

Radio

ContextMenuRadioGroup plus ContextMenuRadioItem when only one value can be on.

Destructive

variant="destructive" on the last item. Put it at the bottom.

Sides

align / collision on the content. Right-click near an edge and the menu stays on screen.

RTL

Wrap with DirectionProvider and dir="rtl". Submenus open toward the start.

API

ContextMenuItem

ContextMenuCheckboxItem takes checked and onCheckedChange. ContextMenuRadioGroup takes value and onValueChange. ContextMenuLabel and ContextMenuSubTrigger take inset.

Keyboard

Long-press the trigger on a touch device.

Notes

Right-click on the trigger replaces the browser menu. Don’t wrap a link if they still need Open in new tab.

With other components

Questions

Related