For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Context Menu

PreviousNext

Displays a menu located at the pointer, triggered by a right click.

Right click here
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/context-menu.json

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu/context-menu";
<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Composition

Use the following composition to build a ContextMenu:

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuLabel
    ├── ContextMenuItem
    │   └── ContextMenuShortcut
    ├── ContextMenuCheckboxItem
    ├── ContextMenuRadioGroup
    │   └── ContextMenuRadioItem
    ├── ContextMenuSeparator
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent

Examples

Submenu

Nest a ContextMenuSub to create a submenu.

Right click here
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSub,

Checkboxes & Radio

Use ContextMenuCheckboxItem and ContextMenuRadioGroup for selectable items.

Right click here
"use client";

import { useState } from "react";

import {
  ContextMenu,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { ArrowLeftIcon, ArrowRightIcon, RotateCwIcon } from "lucide-react";
import * as React from "react";

import { useTranslation } from "@/components/language-selector";

API Reference

See the Base UI documentation for the full API.