Context Menu

Displays a menu of actions triggered by a right click.

Radix UI Base UI

Installation

Command Data Table

On This Page

Installation Usage Examples Basic Submenu Shortcuts Groups Icons Checkboxes Radio Destructive Sides API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add context-menu

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

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

Use ContextMenuSub to nest secondary actions.

Add ContextMenuShortcut to show keyboard hints.

Use ContextMenuCheckboxItem for toggles.

Use ContextMenuRadioItem for exclusive choices.

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

import {
  ContextMenu,
  ContextMenuCheckboxItem,

import {
  ContextMenu,
  ContextMenuContent,

import {
  ContextMenu,
  ContextMenuContent,

import {
  ContextMenu,
  ContextMenuContent,

import {
  ContextMenu,
  ContextMenuContent,

import {
  ContextMenu,
  ContextMenuContent,

import {
  ContextMenu,
  ContextMenuCheckboxItem,

"use client"

import * as React from "react"

import {
  ContextMenu,
  ContextMenuContent,

import {
  ContextMenu,
  ContextMenuContent,