---
title: Context Menu
description: Displays a menu of actions or functions at the pointer when the user right-clicks an element, with submenus, checkboxes and shortcuts.
icon: ellipsis-vertical
author:
  name: shadcn
  url: https://github.com/shadcn
related:
  - /dropdown-menu
  - /menubar
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/context-menu' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/context-menu' },
    { name: 'Lucide', url: 'https://lucide.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/context-menu
```

<ComponentPreview name="context-menu-demo" />

## When to use

Use this decision tree to determine when to use the Context Menu component:

```mermaid
graph TD;
    A[❓ Need contextual actions?] --> B{What trigger method?};
    B --> C[✅ Right-click interaction];
    B --> D[⚠️ Left-click/hover];
    B --> E[⚠️ Button press];

    C --> F[❓ What context?];
    D --> G[⚠️ Use DropdownMenu instead];
    E --> H[⚠️ Use DropdownMenu instead];

    F --> I[✅ Table rows/data items];
    F --> J[✅ File/folder items];
    F --> K[✅ Canvas/drawing areas];
    F --> L[⚠️ Navigation items];

    I --> M[❓ Need nested menus?];
    J --> M;
    K --> M;
    L --> N[⚠️ Use regular Menu instead];

    M --> O[✅ Use ContextMenuSub];
    M --> P[ℹ️ Basic ContextMenuItem];

    O --> Q[❓ Device considerations?];
    P --> Q;

    Q --> R[⚠️ Mobile users present?];
    Q --> S[ℹ️ Desktop-only interface];

    R --> T[⚠️ Provide alternative access];
    S --> U[✅ Implement ContextMenu];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class C,I,J,K,O,U recommended;
    class D,E,G,H,L,N,R,T discouraged;
    class A,B,F,M,Q decision;
    class P,S neutral;
```

## Usage

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

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

## Examples

### Submenu

<ComponentPreview name="context-menu-submenu-demo" description="Context menu with a nested submenu on right-click." />

### Checkbox items

<ComponentPreview name="context-menu-checkbox-demo" description="Context menu with checkbox items for toggle state." />

### Radio group

<ComponentPreview
  name="context-menu-radio-group-demo"
  description="Context menu with radio-group items for exclusive selection."
/>

### Grouped actions

<ComponentPreview name="context-menu-groups-demo" description="Context menu with labeled groups and separators." />

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://base-ui.com/react/components/context-menu" text="Docs" />
  <ExternalLink href="https://base-ui.com/react/components/context-menu#api-reference" text="API Reference" />
</div>

## Keyboard interactions

| Key                        | Action                                                                           |
| -------------------------- | -------------------------------------------------------------------------------- |
| `Shift+F10` on the trigger | Opens the context menu (standards-compliant keyboard equivalent of right-click). |
| `ArrowUp` / `ArrowDown`    | Moves between items. Wraps at the edges.                                         |
| `ArrowLeft` / `ArrowRight` | Opens / closes submenus.                                                         |
| `Home` / `End`             | Jumps to first / last item.                                                      |
| `Enter` / `Space`          | Activates the focused item.                                                      |
| `Escape`                   | Closes the menu.                                                                 |
| Typing a character         | Typeahead jumps to the next matching item.                                       |

## Accessibility

- The trigger region is marked `role="group"` and advertises the context menu via `aria-haspopup="menu"` —
  screen-reader users can reach the menu without a pointing device by pressing `Shift+F10` while focused inside.
- Menu items adopt `role="menuitem"` / `menuitemcheckbox` / `menuitemradio`, with roving focus inside the popup.
- Use a visible outline / ring on the trigger region so keyboard users know where to press `Shift+F10`.
- Keep context-menu-only actions **non-essential** — mirror every action elsewhere (toolbar, main menu) so
  pointer-restricted users are not blocked.

## Credits

- We use [Base UI](https://base-ui.com/react/components/context-menu) for the context-menu component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/context-menu) for the context-menu style.