Context Menu

A menu shown on right-click.

Docs API

Context Menu is built on top of the Menu component. Check it out for more examples.

Installation


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

Anatomy


ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuGroup
    ├── ContextMenuItem
    ├── ContextMenuCheckboxItem
    ├── ContextMenuRadioGroup
    │   └── ContextMenuRadioItem
    ├── ContextMenuSub
    │   ├── ContextMenuSubTrigger
    │   └── ContextMenuSubContent
    ├── ContextMenuSeparator
    └── ContextMenuShortcut

Usage


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


<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItemGroup>
      <ContextMenuItem value="action-1">Action 1</ContextMenuItem>
      <ContextMenuItem value="action-2">Action 2</ContextMenuItem>
      <ContextMenuItem value="action-3">Action 3</ContextMenuItem>
    </ContextMenuItemGroup>
  </ContextMenuContent>
</ContextMenu>