Shadcn Context Menu Components

Shadcn Context Menu Component

The Shadcn Context Menu is a menu that opens at the pointer position when the user right-clicks an area, or long-presses it on a touch screen. It gives power users fast access to actions for the exact thing under the cursor, such as a file, a table row or a canvas element, without adding buttons to the interface.

Right click the dashed Right click here area in the preview to open this shadcn context menu, a browser style menu with inset Back and Reload items and a disabled Forward action. It is built with shadcn/ui, React and Tailwind CSS on the Radix UI Context Menu primitive, so positioning, focus management and keyboard navigation come from the primitive while the look stays in Tailwind classes you own.

What is the Shadcn Context Menu Component?

A context menu has two main parts: a trigger area that listens for the right click and a content panel that appears where the click happened. The panel is rendered in a portal, stays inside the viewport and closes when the user picks an item, clicks outside or presses Escape. Inside it you can use regular items, checkbox and radio items, labels, separators, keyboard shortcut hints and nested submenus.

Because a right click is hidden from most users, a context menu should only offer shortcuts to actions that are also available somewhere else. When the menu should open from a visible button, such as a three dot icon, use a Dropdown Menu. For an application style bar of File, Edit and View menus, use a Menubar, and for searchable commands use a Command palette.

Anatomy of the Shadcn Context Menu

1 Shadcn Context Menu Variant

Each context menu variant listed here is previewed live at the top of this page, together with its source code and install command.

• Context Menu (free): The single variant in this category: a dashed trigger area that reads Right click here and opens a browser style menu with Back, Forward and Reload. The next two entries describe what this example demonstrates.
• Inset items: Every item uses the inset prop, which adds left padding so plain text items line up with items that have icons or check marks.
• Disabled item: The Forward item is disabled, showing how unavailable actions stay visible but cannot be focused or selected.

How to Install the Shadcn Context Menu Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a context menu variant by its name:

npx shadcn@latest add @shadcnuikit/context-menu1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Context Menu Component

Wrap the element that should react to right clicks in ContextMenuTrigger and place the items in ContextMenuContent. Group items with separators and add shortcut hints on the right.

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

export function FileContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-72 items-center justify-center rounded-lg border border-dashed text-sm">
        report-q3.pdf
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>
          Open
          <ContextMenuShortcut>⌘O</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Rename
          <ContextMenuShortcut>F2</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Why Use the Shadcn Context Menu Component

• Actions where the user looks: The menu opens at the pointer, so actions appear right next to the item they affect.
• Cleaner interface: Secondary actions move out of toolbars and rows, leaving more room for content.
• Full keyboard support: Arrow key navigation, typeahead, submenus and focus return are handled by the primitive.
• Rich item types: Checkbox items, radio groups, labels, shortcuts and nested submenus cover desktop style menus.
• Smart positioning: The panel flips and shifts to stay inside the viewport, even near the screen edges.

Common Context Menu Use Cases

• File managers: Open, rename, move and delete files and folders.
• Data tables: Row actions such as edit, duplicate, copy ID or archive.
• Editors and canvases: Copy, paste, arrange layers and change properties in design tools.
• Media galleries: Download, share or set an image as a cover.
• Chat messages: Reply, copy text, pin or delete a single message.
• Kanban boards: Move a card to another column, assign it or change its label.

Customizing the Shadcn Context Menu

The Radix trigger renders a span by default, so give it size, border and layout classes, or pass asChild to use your own element such as a table row or card. Set the menu width with a class on ContextMenuContent, and use icons inside items: they are sized to size-4 automatically. Colors come from the popover and accent tokens in your theme, which you can tune with the free Theme Generator.

A checkbox item needs a piece of state for its checked value. Here is a checkbox item and a submenu inside the content panel:

const [showGrid, setShowGrid] = React.useState(true)

<ContextMenuContent className="w-56">
  <ContextMenuCheckboxItem
    checked={showGrid}
    onCheckedChange={(checked) => setShowGrid(checked === true)}
  >
    Show grid
  </ContextMenuCheckboxItem>
  <ContextMenuSub>
    <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
    <ContextMenuSubContent>
      <ContextMenuItem>Copy link</ContextMenuItem>
      <ContextMenuItem>Email</ContextMenuItem>
    </ContextMenuSubContent>
  </ContextMenuSub>
</ContextMenuContent>

Context Menu Accessibility and Keyboard Support

The content follows the WAI-ARIA menu pattern: it has role="menu", each item has a menuitem, menuitemcheckbox or menuitemradio role, focus moves into the menu when it opens and returns to the page when it closes. Typing a letter jumps to the first item that starts with it.

Keyboard users open a context menu with Shift + F10 or the Menu key, which fires on the focused element. If your trigger is not focusable by default, make it focusable, and always offer the same actions through a visible button or menu so nothing depends on a right click.

Context Menu Best Practices

• Never put an action only in a context menu; always provide a visible way to reach it.
• Keep the list short and group related items with separators and labels.
• Put destructive actions last and use variant="destructive" so they stand out.
• Show keyboard shortcuts next to items when your app supports them; it teaches users faster paths.
• Limit submenus to one level so the menu stays easy to navigate.
• If the menu belongs to a visible button, use a Dropdown Menu instead.

Components Related to Context Menu

Shadcn Context Menu FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.