Context Menu

A menu that opens on right-click or long-press, with shortcuts, checkboxes, radio items and submenus.

$ pnpm dlx shadcn@latest add https://dashral.com/r/context-menu.json

Right-click here (or long-press)

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/context-menu.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/context-menu

Usage

example.tsx

1import { ContextMenu } from "@/components/dashral/context-menu"
2
3<ContextMenu
4  items={[
5    { label: "Rename", onSelect: () => api.file.rename() },
6    { label: "Duplicate" },
7    { type: "separator" },
8    { label: "Delete", color: "destructive", onSelect: () => api.file.delete() },
9  ]}
10>
11  <div className="rounded-lg border p-8 text-sm">Right-click here</div>
12</ContextMenu>

Examples

Checkboxes, radio items and a submenu

type: "checkbox", "radio" and "submenu" items.

Right-click the canvasGrid on · sorted by name

File actions

Right-click a file: rename in place, duplicate, move to a folder, delete with Undo — they all work.

Q3 reportReports

Budget 2026Reports

Hero imageDesign

ContractReports

API reference

ContextMenu

Also takes every prop of Radix Context Menu(opens in a new tab).

Prop	Type	Default
`children`	`ReactElement` The area that responds to right-click and long-press. Required.	—
`items`	`MenuItem[]` Required. A MenuItem is { label, icon?, shortcut?, color?: "destructive", onSelect?, href?, external?, active?, disabled? }, or a { type } of "checkbox", "radio" (a group with options), "row" (small items side by side), "label", "separator" or "submenu" (with items).	—
`linkAs`	`ElementType` Your router's link, for items with href. From a client component.	`"a"`
`onOpenChange`	`(open: boolean) => void` Called when it opens or closes.	—
`className`	`string` The menu panel's classes.	—

Keyboard

Keys	Action
`Shift+F10`or`Menu`	Open the menu for the focused trigger
`↓`or`↑`	Move between items
`Enter`or`Space`	Choose the item (toggle a checkbox or radio item)
`→`	Open a submenu
`←`	Close a submenu
`Escape`	Close the menu and return focus
`A–Z`	Jump to the item starting with that letter

Accessibility

role="menu" with menuitem, menuitemcheckbox and menuitemradio items.
Nothing shows a context menu exists: make every action in it reachable another way too.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.