Context menu
A menu that opens at the pointer on right click (long press on touch), wrapping the Base UI Context Menu. Only the root, trigger, and content are new; everything inside is the regular Bones Menu parts.
Playground
Every control maps to a prop. Right click (or long press) the card to open the menu; the Code tab always shows the markup for exactly what you've configured.
States
Open and highlighted are live (right click, then hover or arrow keys); checked and disabled are the ones you set on the items, and the trigger surface has no hover or focus styling of its own.
Styling states
The popup and items are the Menu's (.ub-menu-popup, .ub-menu-item with data-highlighted, data-checked, data-disabled), and the trigger surface carries data-popup-open while its menu is up, so the right-clicked card can show it:
.ub-context-menu-trigger[data-popup-open] {
outline: 2px solid var(--ub-ring);
outline-offset: 2px;
}Props
Items, groups, separators, checkbox and radio items, and submenus all come from Menu and accept the same props. The context-specific parts:
| Prop | Type | Default | Description |
|---|---|---|---|
ContextMenuRoot.size | "default" | "compact" | "default" | Sizes every item in the menu, submenus included. |
ContextMenuRoot.open | boolean | – | Controlled state. Pair with onOpenChange. |
ContextMenuRoot.defaultOpen | boolean | false | Starts open, for uncontrolled usage. |
One quirk: there is no render on the trigger to attach it to a Button; it is a wrapper div around whatever surface you give it, and the browser's own context menu is suppressed only inside that div.
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, from @usebones/react.
- Structure: ContextMenuRoot wraps ContextMenuTrigger (a div around the right-clickable surface) + ContextMenuContent. The menu opens at the pointer; long press works on touch.
- Fill the content with the regular Menu parts: MenuItem (disabled skips it), MenuCheckboxItem, MenuRadioGroup + MenuRadioItem, MenuGroup + MenuGroupLabel, MenuSeparator, MenuSubmenuRoot + MenuSubmenuTrigger. Same props, same behavior as in Menu.
- size on ContextMenuRoot: "default" | "compact".
- Right click has no keyboard equivalent unless the surface is focusable; keep a visible route to the same actions.
- Restyle in CSS via the Menu classes the popup shares (.ub-menu-popup, .ub-menu-item, [data-highlighted], [data-checked], [data-disabled]), so restyling one restyles both; the trigger is .ub-context-menu-trigger with [data-popup-open]. Tokens only.