Context Menu

A system menu at the pointer, with choices, submenus, shortcut hints and destructive actions.

pulls in@base-ui/reactlucide-react@afterglow/theme

/volumes/capture

Right click, long press or press Shift+F10

Installation

npx shadcn@latest add @afterglow/context-menu

Composition

Component structure.

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

API Reference

A label has to sit inside a ContextMenuGroup. Base UI checks that relationship when the menu opens.

ContextMenuContent

The portal, positioner and popup open at the pointer. Base UI keeps the panel inside the viewport.

Prop	Type	Default
align	"start" \| "center" \| "end"	"start"
side	"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"	"right"
sideOffset	number	0
alignOffset	number	4

ContextMenuLabel

Prop	Type	Default
inset	boolean	false

ContextMenuItem

Prop	Type	Default
inset	boolean	false
variant	"default" \| "destructive"	"default"

ContextMenuSubTrigger

Prop	Type	Default
inset	boolean	false

ContextMenuPortal

Exposes Base UI's portal for custom compositions. The content wrappers create their own portals.

Everything else is Base UI context menu's API, documented there.