A right-click (or long-press) menu for actions tied to a specific object like a file, row, or canvas, supporting grouped items, checkboxes, radio groups, and nested submenus.
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent,
} from "@/components/ui/context-menu";
import {
Photo,
Download,
Pencil,
Link,
Folder,
Star,
Trash,
} from "@appica/icons-react";
export default function ContextMenuCard() {
return (
<ContextMenu>
<ContextMenuTrigger className="block w-56 cursor-default text-left select-none">
<div className="bg-background-muted text-foreground-subtle flex aspect-video items-center justify-center rounded-xl">
<Photo className="size-8" />
</div>
<p className="text-foreground-intense mt-2 text-sm font-medium">
cover-art.png
</p>
<p className="text-foreground-muted text-xs">1.2 MB · PNG</p>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>
<Download data-icon="start" />
Download
</ContextMenuItem>
<ContextMenuItem>
<Pencil data-icon="start" />
Rename
</ContextMenuItem>
<ContextMenuItem>
<Link data-icon="start" />
Copy link
</ContextMenuItem>
<ContextMenuSub>
<ContextMenuSubTrigger>
<Folder data-icon="start" />
Move to
</ContextMenuSubTrigger>
<ContextMenuSubContent>
<ContextMenuItem>Projects</ContextMenuItem>
<ContextMenuItem>Archive</ContextMenuItem>
<ContextMenuItem>Trash</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenuSeparator />
<ContextMenuItem>
<Star data-icon="start" />
Add to favorites
</ContextMenuItem>
<ContextMenuItem className="text-error-emphasis! data-highlighted:before:bg-error-subtle!">
<Trash data-icon="start" />
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}
