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/radix/context-menu.json

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

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

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

Install the following dependencies:

bun add radix-ui lucide-react

npm install radix-ui lucide-react

pnpm add radix-ui lucide-react

yarn add radix-ui 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 { ContextMenu as ContextMenuPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";
import { usePreviewPortal } from "@/registry/react/lib/preview-frame";

export const ContextMenu = (
  props: React.ComponentProps<typeof ContextMenuPrimitive.Root>
) => <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;

export const ContextMenuTrigger = (
  props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>
) => {
  const { className, ...rest } = props;

  return (

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

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

AttributeType

data-slot"context-menu"

ContextMenuTrigger

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

disabled?boolean

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-trigger"

ContextMenuGroup

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

AttributeType

data-slot"context-menu-group"

ContextMenuPortal

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

AttributeType

data-slot"context-menu-portal"

ContextMenuSub

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

AttributeType

data-slot"context-menu-sub"

ContextMenuRadioGroup

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

AttributeType

data-slot"context-menu-radio-group"

ContextMenuContent

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-content"

CSS variableType

--radix-context-menu-content-available-heightstring

--radix-context-menu-content-transform-originstring

ContextMenuItem

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-item"

data-inset?string

data-variant?string

ContextMenuSubTrigger

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

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

data-inset?string

ContextMenuSubContent

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

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

CSS variableType

--radix-context-menu-content-available-heightstring

--radix-context-menu-content-transform-originstring

ContextMenuCheckboxItem

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-checkbox-item"

data-inset?string

ContextMenuRadioItem

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-radio-item"

data-inset?string

ContextMenuGroupLabel

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

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

data-inset?string

ContextMenuSeparator

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-separator"

ContextMenuShortcut

PropType

openboolean): void

children?React.ReactNode

dir?"ltr" | "rtl"

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"context-menu-shortcut"