# Context Menu
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/context-menu
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(collections)/context-menu.mdx
> A right-click context menu with nested submenus, selection state, and long-press support for touch
***
## Import
```tsx
import { ContextMenu } from '@darkcode-ui/react';
```
### Usage
```tsx
"use client";
import {ContextMenu, Label} from "@darkcode-ui/react";
export function Default() {
return (
Right click here
console.log(`Selected: ${key}`)}>
);
}
```
### Anatomy
Import the ContextMenu component and access all parts using dot notation.
```tsx
import { ContextMenu, Label, Header } from '@darkcode-ui/react';
export default () => (
)
```
### Controlled
```tsx
"use client";
import {ContextMenu, Label} from "@darkcode-ui/react";
import {useState} from "react";
export function Controlled() {
const [open, setOpen] = useState(false);
return (
Menu is: {open ? "open" : "closed"}
Right click here
console.log(`Selected: ${key}`)}>
);
}
```
### Disabled
```tsx
"use client";
import {ContextMenu, Label} from "@darkcode-ui/react";
export function Disabled() {
return (
Right click disabled
);
}
```
### Long Press
```tsx
"use client";
import {ContextMenu, Label} from "@darkcode-ui/react";
export function LongPress() {
return (
Long press (touch) or right click
console.log(`Selected: ${key}`)}>
);
}
```
### With Sections
```tsx
"use client";
import {ContextMenu, Header, Kbd, Label} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
export function WithSections() {
return (
Right click here
console.log(`Selected: ${key}`)}>
ActionsNDanger zone
);
}
```
### With Selection
```tsx
"use client";
import type {Selection} from "@darkcode-ui/react";
import {ContextMenu, Header, Label} from "@darkcode-ui/react";
import {useState} from "react";
export function WithSelection() {
const [selected, setSelected] = useState(new Set(["bold"]));
return (
Right click here
Text style
);
}
```
### With Submenus
```tsx
"use client";
import {ContextMenu, Label} from "@darkcode-ui/react";
export function WithSubmenus() {
return (
Right click here
console.log(`Selected: ${key}`)}>
);
}
```
## Related Components
- **Dropdown**: Context menu with actions and options
- **Popover**: Displays content in context with a trigger
- **Separator**: Visual divider between content
## Styling
### Passing Tailwind CSS classes
```tsx
import { ContextMenu, Label } from '@darkcode-ui/react';
function CustomContextMenu() {
return (
Right click here
);
}
```
### Customizing the component classes
To customize the Context Menu component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).
```css
@layer components {
.context-menu__trigger {
@apply relative inline-block;
}
.context-menu__popover {
@apply rounded-lg border border-border bg-overlay p-2;
}
.context-menu__menu {
@apply flex flex-col gap-0.5;
}
.context-menu__separator {
@apply bg-separator;
}
}
```
DarkCode UI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.
### CSS Classes
The Context Menu component uses these CSS classes ([View source styles](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/packages/styles/components/context-menu.css)):
#### Element Classes
- `.context-menu__trigger` — The right-click target area. Relatively positioned `inline-block` with `-webkit-touch-callout: none` for long-press support.
- `.context-menu__popover` — The floating menu panel positioned at the cursor. Has `bg-overlay`, `shadow-overlay`, rounded corners, and enter/exit animations.
- `.context-menu__menu` — The list of menu items inside the popover.
- `.context-menu__separator` — Horizontal divider between menu groups (`bg-separator`).
#### Interactive States
- **Entering**: `[data-entering="true"]` on `.context-menu__popover` — `fade-in` + `zoom-in-90` with placement-aware slide (150ms).
- **Exiting**: `[data-exiting="true"]` on `.context-menu__popover` — `fade-out` + `zoom-out-95` (100ms).
- **Placement slide**: `[data-placement="top"]` slides from bottom, `[data-placement="bottom"]` from top, `[data-placement="left"]` from right, `[data-placement="right"]` from left.
- **Focus visible**: `.context-menu__popover[data-focus-visible="true"]` — outline suppressed.
- **Reduced motion**: `motion-reduce:animate-none` on entering/exiting states.
The Context Menu reuses the Menu, MenuItem, and MenuSection base components for its items, so their classes (`.menu-item`, `.menu-item__indicator`, `.menu-section`, …) are also available for customization. See the [Dropdown](/docs/en/react/components/dropdown) documentation for the full list.
## API Reference
### ContextMenu
The root provider that manages open state and cursor positioning.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | — | Controlled open state. |
| `defaultOpen` | `boolean` | `false` | Initial open state (uncontrolled). |
| `onOpenChange` | `(open: boolean) => void` | — | Callback when open state changes. |
| `isDisabled` | `boolean` | `false` | Whether the context menu is disabled. |
| `children` | `ReactNode` | — | Context menu content. |
### ContextMenu.Trigger
The right-click (or long-press) target area. Renders a `