Skip to content

Context Menu

Actions at the pointer, on right click or a long press. Never the only way in: the ⋯ button offers the same actions.

Sourcecomponents/context-menu.tsx
atlas-brief.md (right-click me)

Usage

Context Menu usage
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/context-menu";
export function ContextMenuUsage({ rename, askToDelete }: { rename: () => void; askToDelete: () => void }) {  // Offer the same actions in a visible More (⋯) menu on the card too.  return (    <ContextMenu>      <ContextMenuTrigger className="rounded-md border border-border p-4">brief.pdf</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuItem onClick={rename}>Rename</ContextMenuItem>        <ContextMenuItem variant="destructive" onClick={askToDelete}>          Delete…        </ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

When to use

Use when

A right-click or long-press shortcut to actions on an item

Don’t use when

Being the only way to an action: put the same actions in a visible More (⋯) Dropdown Menu