shadcn.io is not affiliated with official shadcn/ui

Shadcn Context Menu for React

A menu shown on right-click.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/context-menu.json

npx shadcn@latest add https://kit.dev/r/aria/context-menu.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/context-menu.json

yarn shadcn@latest add https://kit.dev/r/aria/context-menu.json

Install the following dependencies:

bun add react-aria-components tailwind-variants lucide-react

npm install react-aria-components tailwind-variants lucide-react

pnpm add react-aria-components tailwind-variants lucide-react

yarn add react-aria-components tailwind-variants lucide-react

Copy and paste the following code into your project.

components/ui/context-menu.tsx

"use client";

import { CheckIcon, ChevronRightIcon } from "lucide-react";
import type React from "react";
import {
  Children,
  isValidElement,
  type ReactElement,
  type ReactNode,
} from "react";
import {
  composeRenderProps,
  Header as HeaderPrimitive,
  MenuItem as MenuItemPrimitive,
  type MenuItemProps as MenuItemPrimitiveProps,
  Menu as MenuPrimitive,
  MenuSection as MenuSectionPrimitive,
  type MenuSectionProps as MenuSectionPrimitiveProps,

Update the import paths to match your project setup.

Anatomy

ContextMenuArrow
└── ContextMenuArrowTip
ContextMenuTrigger
ContextMenuIndicator
ContextMenuQuickItem
└── ContextMenuGroup
    ├── ContextMenuSubContent
    │   └── ContextMenuPositioner
    └── ContextMenuGroupLabel
ContextMenuItemIndicator
ContextMenuItemText
ContextMenuSeparator
ContextMenuTrigger
└── ContextMenuSubTrigger

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
    <span className="pointer-fine:inline-block hidden">Right click here</span>
    <span className="pointer-coarse:inline-block hidden">
      Long press here
    </span>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-48">
    <ContextMenuGroup>
      <ContextMenuItem value="back">
        Back
        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem disabled value="forward">
        Forward
        <ContextMenuShortcut>⌘]</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem value="reload">
        Reload
        <ContextMenuShortcut>⌘R</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuSub>
        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
        <ContextMenuSubContent className="w-44">
          <ContextMenuGroup>
            <ContextMenuItem value="save-page">Save Page...</ContextMenuItem>
            <ContextMenuItem value="create-shortcut">
              Create Shortcut...
            </ContextMenuItem>
            <ContextMenuItem value="name-window">
              Name Window...
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem value="developer-tools">
              Developer Tools
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem value="delete" variant="destructive">
              Delete
            </ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuSubContent>
      </ContextMenuSub>
    </ContextMenuGroup>
    <ContextMenuSeparator />
    <ContextMenuGroup>
      <ContextMenuCheckboxItem checked value="show-bookmarks">
        Show Bookmarks
      </ContextMenuCheckboxItem>
      <ContextMenuCheckboxItem checked={false} value="show-full-urls">
        Show Full URLs
      </ContextMenuCheckboxItem>
    </ContextMenuGroup>
    <ContextMenuSeparator />
    <ContextMenuGroup>
      <ContextMenuRadioGroup value="pedro">
        <ContextMenuGroupLabel>People</ContextMenuGroupLabel>
        <ContextMenuRadioItem value="pedro">
          Pedro Duarte
        </ContextMenuRadioItem>
        <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
      </ContextMenuRadioGroup>
    </ContextMenuGroup>
  </ContextMenuContent>
</ContextMenu>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowDown`	Move down.
`ArrowUp`	Move up.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Basic

A simple context menu with a few actions.

PreviewCode

Submenu

Use ContextMenuSub to nest secondary actions.

PreviewCode

Shortcuts

Add ContextMenuShortcut to show keyboard hints.

PreviewCode

Groups

Group related actions and separate them with dividers.

PreviewCode

Icons

Combine icons with labels for quick scanning.

PreviewCode

Checkboxes

Use ContextMenuCheckboxItem for toggles.

PreviewCode

Radio

Use ContextMenuRadioItem for exclusive choices.

PreviewCode

Destructive

Use variant="destructive" to style the menu item as destructive.

PreviewCode

Sides

Control menu placement with positioning placement.

PreviewCode

Rtl

Right-to-left context menu. See the RTL configuration guide for document direction.

PreviewCode

API Reference

ContextMenu

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot?string

CSS variableType

--trigger-anchor-pointstring

ContextMenuTrigger

PropType

onContextMenu?(e: ContextMenuEvent) → void

ContextMenuGroup

PropType

onContextMenu?(e: ContextMenuEvent) → void

AttributeType

data-slot"context-menu-group"

ContextMenuGroupLabel

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot"context-menu-group-label"

data-inset?string

ContextMenuItem

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot"context-menu-item"

data-inset?string

data-variant?string

ContextMenuSub

PropType

onContextMenu?(e: ContextMenuEvent) → void

AttributeType

data-slot"context-menu-sub"

ContextMenuSubTrigger

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot"context-menu-sub-trigger"

data-inset?string

ContextMenuSubContent

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot"context-menu-sub-content"

ContextMenuSeparator

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot"context-menu-separator"

ContextMenuShortcut

PropType

onContextMenu?(e: ContextMenuEvent) → void

className?string

AttributeType

data-slot"context-menu-shortcut"