Context Menu
A right-click menu that opens at the pointer position. Built on the Radix UI Context Menu primitive with premium visual variants, semantic item styles, nested submenus, and checkbox/radio selection — full visual parity with Dropdown Menu Pro.
Pro features
What the Pro version adds to this component.
Premium Visual Variants
Glass, gradient, neon, and premium surfaces for the menu panel plus six width presets from sm to full
Semantic Item Styles
Destructive, success, warning, and premium item variants communicate action intent at a glance
Nested Submenus
Multi-level Sub, SubTrigger, and SubContent composition with optional badges and chevron control
Checkbox and Radio Items
Built-in checked and radio selection with indicators for preference and view menus
Accessible by Default
Built on Radix UI: full keyboard navigation, typeahead, ARIA menu semantics, and focus management
Dropdown Menu Parity
Shares its visual system with Dropdown Menu Pro so right-click and button menus look identical
Installation
Install via CLI
npx @moontra/moonui-cli add context-menuUsage
Examples
Basic Context Menu
Right click the dashed area to open a browser-style menu with inset items, a separator, and keyboard shortcut hints.
Checkbox and Radio Items
Build preference menus with ContextMenuCheckboxItem for toggles and ContextMenuRadioGroup for exclusive selection.
File Manager with Submenu
A real-world file card: right click to open actions including a nested Share submenu and a destructive Move to Trash item.
Visual Variants
The variant prop on ContextMenuContent switches between default, glass, gradient, neon, and premium surfaces, while ContextMenuItem supports destructive, success, warning, and premium styles.
Panel and Item Sizes
ContextMenuContent has six width presets — sm, md, lg, xl, 2xl and full — that set the minimum panel width, and ContextMenuItem has its own sm/md/lg scale for row density. Pick a narrow panel for short verb-only menus and a wide one when rows carry secondary text or shortcuts.