Loading…

Context Menu

beta

A right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.

Overlays
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add context-menu

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ContextMenu } from "@/components/ui/context-menu";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Selectable

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ContextMenuContent>

Every prop of Radix UI’s ContextMenu.Content, plus className.

<ContextMenuItem>

Prop	Type	Default
`inset` Indents the item to align with items that have a leading indicator.	`boolean`	—
`variant` Styles the item as destructive. Pair with a label that says what is destroyed.	`"default" \| "destructive"`	`"default"`

Every prop of Radix UI’s ContextMenu.Item, plus className.

<ContextMenuCheckboxItem>

Every prop of Radix UI’s ContextMenu.CheckboxItem, plus className.

<ContextMenuRadioItem>

Every prop of Radix UI’s ContextMenu.RadioItem, plus className.

<ContextMenuLabel>

Prop	Type	Default
`inset`	`boolean`	—

Every prop of Radix UI’s ContextMenu.Label, plus className.

<ContextMenuSeparator>

Every prop of Radix UI’s ContextMenu.Separator, plus className.

<ContextMenuShortcut>

Plus every attribute of <span>.

<ContextMenuSubTrigger>

Prop	Type	Default
`inset`	`boolean`	—

Every prop of Radix UI’s ContextMenu.SubTrigger, plus className.

<ContextMenuSubContent>

Every prop of Radix UI’s ContextMenu.SubContent, plus className.

Accessibility

Opens on right-click, long press, Shift+F10 or the Menu key — the keyboard paths need a focusable trigger. Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes and returns focus, Right/Left open and close submenus (mirrored in RTL). Checkbox and radio items expose aria-checked; shortcuts are aria-hidden hints. A context menu is invisible until summoned, so its actions should also be reachable elsewhere. The pop and stagger stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

inset

Indents the item to align with items that have a leading indicator.

boolean

—

variant

Styles the item as destructive. Pair with a label that says what is destroyed.

"default" | "destructive"

"default"

Prop

Type

Default

inset

boolean

—

Prop

Type

Default

inset

boolean

—