Context Menu

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

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

<ContextMenu>
  <ContextMenuTrigger className="p-8 rounded-lg border border-dashed">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuPopup>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuPopup>
</ContextMenu>;

ContextMenuTrigger is the area that opens the menu on right click or long press. Once the menu is open it works like Menu: arrow keys move between items and Escape closes it.

Keyboard users can't right click, so make sure every action in a context menu is also available somewhere else, like a toolbar or a Menu.

Checkbox and radio itemsCopy Anchor Link

Submenus and linksCopy Anchor Link

API referenceCopy Anchor Link

Built on Base UI Context Menu. Every part accepts the props of its Base UI counterpart. The parts match Menu with a ContextMenu prefix, and take the same extra props: variant and inset on items, variant="switch" on checkbox items, and inset on group labels and submenu triggers.

ContextMenuPopupCopy Anchor Link

ContextMenuItemCopy Anchor Link