Context Menu API - Syncfusion® React

A context menu component that displays options when triggered by a right-click or tap-hold action. Supports nested submenus, keyboard navigation, icons, and various animation effects.

Usage

To import and use the Context Menu component in your application, use the following code snippet:

import { ContextMenu, MenuItem, MenuItemLabel, MenuItemIcon } from '@syncfusion/react-navigations';

import { useRef } from 'react';
export default function App() {
  const targetRef = useRef<HTMLDivElement>(null);
  return (
      <div ref={targetRef}>
          <button>Right Click Me</button>
          <ContextMenu targetRef={targetRef}>
              <MenuItem>
                  <MenuItemIcon><CutIcon /></MenuItemIcon>
                  <MenuItemLabel>Cut</MenuItemLabel>
              </MenuItem>
              <MenuItem>
                  <MenuItemIcon><CopyIcon /></MenuItemIcon>
                  <MenuItemLabel>Copy</MenuItemLabel>
              </MenuItem>
              <MenuItem>
                  <MenuItemIcon><RenameIcon /></MenuItemIcon>
                  <MenuItemLabel>Rename</MenuItemLabel>
              </MenuItem>
          </ContextMenu>
      </div>
  );
}

import { ContextMenu, MenuItem, MenuItemLabel, MenuItemIcon } from '@syncfusion/react-navigations';

import { useRef } from 'react';
export default function App() {
  const targetRef = useRef<HTMLDivElement>(null);
  return (
      <div ref={targetRef}>
          <button>Right Click Me</button>
          <ContextMenu targetRef={targetRef}>
              <MenuItem>
                  <MenuItemIcon><CutIcon /></MenuItemIcon>
                  <MenuItemLabel>Cut</MenuItemLabel>
              </MenuItem>
              <MenuItem>
                  <MenuItemIcon><CopyIcon /></MenuItemIcon>
                  <MenuItemLabel>Copy</MenuItemLabel>
              </MenuItem>
              <MenuItem>
                  <MenuItemIcon><RenameIcon /></MenuItemIcon>
                  <MenuItemLabel>Rename</MenuItemLabel>
              </MenuItem>
          </ContextMenu>
      </div>
  );
}

Demos

Explore the demos of the React Context Menu component. Refer to this page.

Props

The following table outlines the props for the Context Menu component:

Name	Type	Default	Description
allowBrowserContext	boolean	false	Enables the browser's native context menu on `targetRef` when the user holds Ctrl (Windows/Linux) or Cmd (macOS) and right-clicks, bypassing the custom ContextMenu
animation	MenuAnimationProps	{ duration: 400, easing: 'ease', effect: 'FadeIn' }	Specifies the animation settings for the Menu open.
closeOnScroll	boolean	true	Specifies whether to close the Menu when the document is scrolled. When set to true, scrolling the page will automatically close the menu.
container	HTMLElement	document.body	Specifies the container element where the ContextMenu should be rendered. This allows the ContextMenu to be rendered within a specific DOM container. When using a custom container, ensure that the container creates a positioning context, such as by setting `position: relative`.
hoverDelay	number	0	Specifies the delay time in milliseconds before opening the submenu when hovering.
itemOnClick	boolean	false	Specifies whether to show the sub menu on click instead of hover. When set to true, the sub menu will open only on mouse click rather than on hover.
offset	OffsetPosition	-	Specifies the position (left/top coordinates) of the ContextMenu. This determines where the menu will appear on the screen.
open	boolean	-	Specifies the visibility of the ContextMenu. If set to true, the ContextMenu is displayed. If false, it is hidden.
targetRef	RefObject<HTMLElement>	-	Specifies target element on which the ContextMenu should be opened. When provided, ContextMenu events on this element will automatically trigger the context menu to appear at the cursor position. The standard contextmenu event is not supported on iOS devices, so this component automatically implements a tapHold touch event handler when iOS is detected. This ensures consistent context menu functionality across all platforms and devices. If you prefer to use your own event handling mechanism or need different trigger behaviors, you can omit this prop and manually control menu display with the `open` and `offset` props instead.

Events

The following table outlines the events for the Context Menu component:

Name	Type	Description
onClose	(event: Event) => void	Specifies the callback function that triggers before closing the Menu.
onOpen	(event: Event) => void	Specifies the callback function that triggers before open the Menu.
onSelect	(event: MenuSelectEvent) => void	Specifies the callback function that triggers when selecting a Menu item.

Context Menu Component

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today