Context Menu A high-quality, unstyled React context menu component that appears at the pointer on right click or long press.
A menu that appears at the pointer on right click or long press.
Import the components and place them together:
import { ContextMenu } from '@base-ui/react/context-menu' ; < ContextMenu.Root > < ContextMenu.Trigger /> < ContextMenu.Portal > < ContextMenu.Backdrop /> < ContextMenu.Positioner > < ContextMenu.Popup > < ContextMenu.Arrow /> < ContextMenu.Item /> < ContextMenu.LinkItem /> < ContextMenu.Separator /> < ContextMenu.Group > < ContextMenu.GroupLabel /> </ ContextMenu.Group > < ContextMenu.RadioGroup > < ContextMenu.RadioItem /> </ ContextMenu.RadioGroup > < ContextMenu.CheckboxItem /> < ContextMenu.SubmenuRoot > < ContextMenu.SubmenuTrigger /> </ ContextMenu.SubmenuRoot > </ ContextMenu.Popup > </ ContextMenu.Positioner > </ ContextMenu.Portal > </ ContextMenu.Root >; Menu displays additional demos, many of which apply to the context menu as well.
To create a submenu, create a <ContextMenu.SubmenuRoot> inside the parent context menu. Use the <ContextMenu.SubmenuTrigger> part for the menu item that opens the nested menu.
API Documentation for ContextMenu not found.
Portal Name Type Default Description keepMountedOptional boolean | undefinedfalseWhether to keep the portal mounted in the DOM while the popup is hidden.
Popup Name Type Default Description childrenOptional React.ReactNode— — idOptional string | undefined— @ignore
Item Name Type Default Description onClickOptional BaseUIComponentProps<'div', MenuItemState>['onClick'] | undefined— The click handler for the menu item. disabledOptional boolean | undefinedfalseWhether the component should ignore user interaction. labelOptional string | undefined— Overrides the text label to use when the item is matched during keyboard text navigation. idOptional string | undefined— @ignore closeOnClickOptional boolean | undefinedtrueWhether to close the menu when the item is clicked.
LinkItem Name Type Default Description labelOptional string | undefined— Overrides the text label to use when the item is matched during keyboard text navigation. idOptional string | undefined— @ignore closeOnClickOptional boolean | undefinedfalseWhether to close the menu when the item is clicked.
SubmenuRoot Name Type Default Description closeParentOnEscOptional boolean | undefinedfalseWhen in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
SubmenuTrigger Name Type Default Description onClickOptional BaseUIComponentProps<'div', MenuSubmenuTriggerState>['onClick'] | undefined— — labelOptional string | undefined— Overrides the text label to use when the item is matched during keyboard text navigation. idOptional string | undefined— @ignore disabledOptional boolean | undefinedfalseWhether the component should ignore user interaction. delayOptional number | undefined100How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. closeDelayOptional number | undefined0How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. openOnHoverOptional boolean | undefined— Whether the menu should also open when the trigger is hovered.
Group Name Type Default Description childrenOptional React.ReactNode— The content of the component.
RadioGroup Name Type Default Description childrenOptional React.ReactNode— The content of the component. valueOptional any— The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead. defaultValueOptional any— The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the `value` prop instead. disabledOptional boolean | undefinedfalseWhether the component should ignore user interaction.
RadioItem Name Type Default Description valueRequired any— Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected. onClickOptional BaseUIComponentProps<'div', MenuRadioItemState>['onClick'] | undefined— The click handler for the menu item. disabledOptional boolean | undefinedfalseWhether the component should ignore user interaction. labelOptional string | undefined— Overrides the text label to use when the item is matched during keyboard text navigation. idOptional string | undefined— @ignore closeOnClickOptional boolean | undefinedfalseWhether to close the menu when the item is clicked.
RadioItemIndicator Name Type Default Description keepMountedOptional boolean | undefinedfalseWhether to keep the HTML element in the DOM when the radio item is inactive.
CheckboxItem Name Type Default Description checkedOptional boolean | undefined— Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead. defaultCheckedOptional boolean | undefinedfalseWhether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead. onClickOptional BaseUIComponentProps<'div', MenuCheckboxItemState>['onClick'] | undefined— The click handler for the menu item. disabledOptional boolean | undefinedfalseWhether the component should ignore user interaction. labelOptional string | undefined— Overrides the text label to use when the item is matched during keyboard text navigation. idOptional string | undefined— @ignore closeOnClickOptional boolean | undefinedfalseWhether to close the menu when the item is clicked.
CheckboxItemIndicator Name Type Default Description keepMountedOptional boolean | undefinedfalseWhether to keep the HTML element in the DOM when the checkbox item is not checked.