Context menu

A menu of actions that opens at the pointer on a right click, or a long press on a touch screen, over an area.

ui.context-menucomponents/ui/context-menu.tsx

Use case

For the AI

Use it on items where people expect a right click: a file in a client's documents, a card on a job board, a row in a dense table of orders. It repeats actions that are also reachable another way (the row's ⋯, a button), as a shortcut at the pointer.

Use it when

Files, cards or rows where a right click is expected
Repeating a row's ⋯ actions at the pointer
A board or a canvas with no room for buttons on each item

Use something else when

The actions must be found without knowing to right click: a visible ⋯ or Actions button: Dropdown menu
Running any action by name from anywhere: Command bar

Examples

Code

Import

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

Usage

<ContextMenu>
  <ContextMenuTrigger className="flex h-11 items-center rounded-[12px] px-3 text-[14px]">
    Contract, Auberge du Lac Brûlé.pdf
  </ContextMenuTrigger>
  <ContextMenuPopup className="w-52">
    <ContextMenuItem onClick={onOpen}>
      Open
      <ContextMenuShortcut>↵</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem onClick={onRename}>
      Rename
      <ContextMenuShortcut>F2</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive" onClick={onDelete}>
      Delete
    </ContextMenuItem>
  </ContextMenuPopup>
</ContextMenu>

Rules

Items are Title Case; a destructive item uses `variant="destructive"` and sits last, after a `ContextMenuSeparator`.
`ContextMenuTrigger` is the item itself (the row, the card), the area that answers the right click.
A shortcut goes in `ContextMenuShortcut` at the item's end.