Context Menu
A system menu at the pointer, with choices, submenus, shortcut hints and destructive actions.
/volumes/capture
Right click, long press or press Shift+F10
Installation
npx shadcn@latest add @afterglow/context-menuComposition
Component structure.
ContextMenu
- ContextMenuTrigger
- ContextMenuContent
- ContextMenuGroup
- ContextMenuLabel
- ContextMenuItem
- ContextMenuShortcut
- ContextMenuCheckboxItem
- ContextMenuRadioGroup
- ContextMenuRadioItem
- ContextMenuSeparator
- ContextMenuSub
- ContextMenuSubTrigger
- ContextMenuSubContent
- ContextMenuGroup
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.