◇
ContextMenu
16 partsA menu that opens at the pointer on right-click (or a long-press on touch),
replacing the platform's native context menu with your own styled actions.
Built on top of Menu, so it inherits keyboard navigation, typeahead, nested
submenus, and checkbox/radio items.
Use it for contextual actions tied to a region or element — cut/copy/paste,
row actions in a table, canvas tools — when there is no persistent button to
click. The root owns open state and provides context to every part; listen
to update:open to react when the menu opens or closes.
Demo
Loading demo…
Anatomy
Import the parts and compose them. Each part forwards attributes to its underlying element.
vue
import {
ContextMenuArrow,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuGroup,
ContextMenuItem,
ContextMenuItemIndicator,
ContextMenuLabel,
ContextMenuPortal,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuRoot,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from '@robonen/primitives/menus/context-menu';
<ContextMenuRoot>
<ContextMenuArrow />
<ContextMenuCheckboxItem />
<ContextMenuContent />
<ContextMenuGroup />
<ContextMenuItem />
<ContextMenuItemIndicator />
<ContextMenuLabel />
<ContextMenuPortal />
<ContextMenuRadioGroup />
<ContextMenuRadioItem />
<ContextMenuSeparator />
<ContextMenuSub />
<ContextMenuSubContent />
<ContextMenuSubTrigger />
<ContextMenuTrigger />
</ContextMenuRoot>