Skip to content
Cuelark UI
NavigationAnimated

Context Menu

Right-click menus that spring out from the pointer.

Context Menu opens actions where the user right-clicks or long-presses: canvases, file lists, table rows. It springs out from the pointer, shows shortcuts as keycaps and supports submenus and checkable items.

Preview

Right-click here

Installation

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

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/context-menu.

Builds on: motion

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right-click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Duplicate</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Motion

How it moves

Springs out from the pointer (popIn); submenus too.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

ContextMenuItem

PropTypeDefaultDescription
variant"default" | "destructive""default"Destructive items are red.

ContextMenu · Trigger · Content · CheckboxItem · Label · Separator · Shortcut · Sub · SubTrigger · SubContent

Accessibility

  • Opens with the context-menu key and Shift+F10, not only right-click.
  • Full menu keyboard support; Esc returns focus.

FAQ

Also searched as: react context menu · right click menu react · shadcn context menu · custom right click menu · radix context menu