React Context Menu Component API

Context Menu API

CoreUI PRO
This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Explore the API reference for the React Context Menu component and discover how to effectively utilize its props for customization.

On this page

CContextMenu

jsx
import { CContextMenu } from '@coreui/react-pro'
PropertyDefaultType
autoClosetrueboolean, 'inside', 'outside'

Configures the auto close behavior: - true — closes on a click inside or outside the menu, - 'inside' — closes on a click inside the menu only, - 'outside' — closes on a click outside the menu only, - false — closes only on the Escape key.

className-string

A string of all className you want applied to the trigger area.

container-Element, DocumentFragment, (() => Element | DocumentFragment | null), null

The element the panel is rendered into instead of document.body. Implies portal. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

dark-boolean

Renders the panel in the dark theme.

disabled-boolean

Keeps the menu closed and lets the browser's own menu through.

offset[0, 2][number, number]

The distance of the panel from the pointer, as [skidding, distance].

onHide-(() => void)

Callback fired when the menu is hidden.

onShow-(() => void)

Callback fired when the menu is shown.

placementbottom-start'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', string

Where the panel opens relative to the pointer. It flips when that side of the viewport is short, and a logical start or end side resolves to the side the writing direction puts it on.

portal-boolean

Renders the panel through a portal.

The menu itself is a <CMenuContent> with the same items, headers, dividers and submenus as a Menu.