Components
Context Menu
A right-click context menu built on Radix UI's ContextMenu primitive, with items, labels, separators, checkboxes, and sub-menus.
Install
npx shadcn@latest add https://atomx.acau.net/r/context-menu.jsonUsage
Wrap any element in ContextMenuTrigger to make it open the menu on right-click (or long-press on touch devices). ContextMenuContent contains the menu items. Use ContextMenuLabel for section headings and ContextMenuSeparator between groups.
<ContextMenu>
<ContextMenuTrigger>Right-click me</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuLabel>Actions</ContextMenuLabel>
<ContextMenuSeparator />
<ContextMenuItem>Copy</ContextMenuItem>
<ContextMenuItem>Paste</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Preview
Right-click here
Props
ContextMenu extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>.
| Component | Notable props |
|---|---|
ContextMenuTrigger | Any element. asChild to render the child as the trigger. |
ContextMenuContent | className for width/positioning overrides. |
ContextMenuItem | inset — left-indent to align with items that have icons. onSelect — called when clicked. |
ContextMenuLabel | inset — matches ContextMenuItem indent. |
ContextMenuSeparator | Horizontal divider. |
ContextMenuShortcut | Right-aligned keyboard hint span. |
ContextMenuCheckboxItem | checked, onCheckedChange. |
ContextMenuRadioGroup / ContextMenuRadioItem | For mutually exclusive menu choices. |
ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent | Nested sub-menu. |