CatalystContext Menuv0.4.2Documentation Under Review
A right-click context menu primitive with nested submenus, keyboard shortcuts, danger states, and three size variants.
Prefer AI-assisted development?
Catalyst Context Menu extends the Radix UI Context Menu primitive with built-in design tokens, CVA variants, size inheritance, and danger states — giving you a production-ready right-click menu with zero configuration.
Installation
npm install @pmi/catalyst-context-menuimport {
ContextMenuRoot,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent,
ContextMenuPortal,
} from '@pmi/catalyst-context-menu';Sizes
Three sizes — sm, md (default), and lg — are set on ContextMenuContent and inherited automatically by all child items.
Common Patterns
Danger Items
Use the danger prop on ContextMenuItem for destructive actions.
Submenu
Nest ContextMenuSub, ContextMenuSubTrigger, and ContextMenuSubContent for multi-level menus.
Disabled Items
Pass disabled to any ContextMenuItem or ContextMenuSubTrigger to prevent interaction.
API Reference
Context Menu is a compound component built on Radix UI primitives. The sections below summarize the Catalyst-specific API surface for each part.
ContextMenuRoot
The root container that manages open state. Accepts all standard Radix ContextMenu Root props.
Prop
Type
ContextMenuTrigger
The element that opens the menu on right-click. Accepts all standard Radix ContextMenu Trigger props.
Prop
Type
ContextMenuContent
The menu container. Sets the size context consumed by all child items.
Prop
Type
ContextMenuItem
An individual selectable menu item.
Prop
Type
ContextMenuSubTrigger
The trigger that opens a nested submenu.
Prop
Type
ContextMenuSubContent
The content container for a nested submenu. Inherits size from the parent menu.
Prop
Type
ContextMenuLabel
A label for grouping menu items. Non-interactive.
Prop
Type
ContextMenuSeparator
A visual separator between menu items.
Prop
Type
ContextMenuPortal
Portal component for rendering the menu in a different DOM location.
Prop
Type
Accessibility
Context Menu is designed to meet WCAG 2.2 AA standards.
Keyboard Interactions
| Key | Action |
|---|---|
Right-click | Opens the context menu |
Shift + F10 | Opens the context menu via keyboard |
ArrowUp / Down | Navigates between menu items |
ArrowRight | Opens a submenu |
ArrowLeft | Closes a submenu and returns focus |
Enter / Space | Selects the focused item |
Escape | Closes the menu and returns focus |
ARIA
- Radix provides
role="menu",role="menuitem", andaria-haspopupautomatically. - Disabled items use
data-disabledandaria-disabledso screen readers announce them correctly. - Typeahead navigation is built in — typing a letter focuses the first matching item.
- Danger styling uses color and a descriptive label; color is never the sole indicator — always pair color with an icon, descriptive text, or both.
See the Radix Context Menu accessibility docs and the ARIA Menu pattern for full specification.
Choosing the Right Component
Use Context Menu when an action list should appear on right-click. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A menu opened by a button click | Dropdown Menu |
| A horizontal application menu bar | Menubar |
| A simple list of navigation links | Navigation Menu |