Docs › Components › Context Menu

Shadcn Context Menu

The shadcn/ui Context Menu shows actions when the user right-clicks (or long-presses) a target element, styled with Tailwind CSS v4. Built on Base UI, it supports items, checkboxes, submenus, and shortcuts. Context menus power right-click actions across ShadcnStore app blocks.

Key features

• Opens on right-click or long-press of a target.
• Items, labels, separators, and keyboard shortcuts.
• Checkbox and radio items, plus nested submenus.
• Full keyboard navigation once open.
• Built on Base UI with full keyboard navigation.

Installation

npx shadcn@latest add context-menu

Usage

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

export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Reload</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Accessibility

• Provide a keyboard alternative to right-click actions, since context menus are pointer-oriented.
• Keep item labels short and give destructive items a clear style.
• Announce that a right-click menu is available where discoverability matters.

When to use the Context Menu

Use a Context Menu for actions tied to right-clicking a specific element: a file, a table row, or a canvas object. For actions from a visible button, use a Dropdown Menu. For app-wide menus, use a Menubar.

Used in these blocks

• Apps: right-click actions on items.
• Datatables: row context actions.
• App shells: canvas and item menus.

Related components

For button-triggered menus use a Dropdown Menu; for an app menu bar use a Menubar. Context menus often act on a Data Table row.

FAQ

What is the shadcn context menu used for?

The Context Menu shows actions on right-click (or long-press) for a specific element, such as a file, row, or canvas item.

What is the difference between Context Menu and Dropdown Menu?

Context Menu opens on right-click of a target element. Dropdown Menu opens from a button the user clicks.

Can it have submenus and checkboxes?

Yes. It supports ContextMenuSub, ContextMenuCheckboxItem, and ContextMenuRadioGroup.

Does it work on touch devices?

It opens on long-press, but always provide a visible alternative since right-click is not obvious on touch.