Context Menu

The menu that appears on right-click or Control-click.

@cupertinoui/context-menuBase UI Context Menu Registry JSON

Right-click here

"use client"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-72 items-center justify-center rounded-[12px] border border-dashed border-mac-label-tertiary text-mac-body text-mac-label-secondary">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuItem>Open in New Tab</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Get Info <ContextMenuShortcut>⌘I</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Rename</ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-40">
            <ContextMenuItem>AirDrop</ContextMenuItem>
            <ContextMenuItem>Mail</ContextMenuItem>
            <ContextMenuItem>Messages</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Move to Trash</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/context-menu

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Get Info</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API Reference

Every part forwards the props of the underlying Base UI Context Menu part. The props below are the ones CupertinoUI adds or changes.

ContextMenuItem

Prop	Type	Description
`variant`	`"default" \| "destructive"` Default: `"default"`	Destructive items are red.
`inset`	`boolean`	Indent the item.