caliper uidocs
DemoSign inGet Pro

Context menu

Free

A menu opened with a right-click or long press on a piece of content.

Installs components/ui/context-menu.tsxDepends on @radix-ui/react-context-menuMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/context-menu.json
quarterly-report.pdf

Right-click the file, or long-press on touch.

When to use #

Use it for

  • Actions tied to the thing under the pointer, like a file or a row.
  • As a secondary route to actions that are also in a visible menu.

Skip it when

  • It is the only route to an action; right-click is not discoverable.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/context-menu.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from ContextMenu, ContextMenuTrigger, ContextMenuContent and ContextMenuItem.

example.tsx
import { useState } from "react"
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu"

export function FileContext() {
  const [last, setLast] = useState("Right-click the file, or long-press on touch.");
  return (
    <div className="grid w-full max-w-sm gap-3">
      <ContextMenu>
        <ContextMenuTrigger asChild>
          <div className="rounded-lg border border-dashed border-border p-8 text-center text-sm">quarterly-report.pdf</div>
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem onSelect={() => setLast("Opened.")}>Open</ContextMenuItem>
          <ContextMenuItem onSelect={() => setLast("Renamed.")}>Rename</ContextMenuItem>
          <ContextMenuItem onSelect={() => setLast("Deleted.")}>Delete</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p role="status" className="text-sm text-muted-foreground">{last}</p>
    </div>
  );
}

API reference #

ContextMenu

component

No props of its own; it accepts the native props of its root element.

ContextMenuTrigger

component

No props of its own; it accepts the native props of its root element.

ContextMenuContent

component

No props of its own; it accepts the native props of its root element.

ContextMenuItem

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It is built on native elements, so roles and focus come from the browser.

Keyboard and focus handling comes from Radix context-menu: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.