Context Menu API - Syncfusion® React

The ContextMenu component displays a menu with a list of options when triggered by a right-click. It 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 } from "@syncfusion/react-navigations";

const targetRef = useRef<HTMLButtonElement>(null);
return (
    <div >
       <button ref={targetRef}> Right Click Me </button>
        <ContextMenu targetRef={targetRef as React.RefObject<HTMLElement>}>
           <MenuItem text="Cut" />
            <MenuItem text="Copy" />
           <MenuItem text="Rename" />
       </ContextMenu>
    </div>
);

import { ContextMenu } from "@syncfusion/react-navigations";

const targetRef = useRef<HTMLButtonElement>(null);
return (
    <div >
       <button ref={targetRef}> Right Click Me </button>
        <ContextMenu targetRef={targetRef as React.RefObject<HTMLElement>}>
           <MenuItem text="Cut" />
            <MenuItem text="Copy" />
           <MenuItem text="Rename" />
       </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
animation	MenuAnimationProps	{ duration: 400, easing: 'ease', effect: 'FadeIn' }	Specifies the animation settings for the ContextMenu open.
closeOnScroll	boolean	true	Specifies whether to close the ContextMenu when the document is scrolled. When set to true, scrolling the page will automatically close the menu.
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.
itemTemplate	(item: MenuItemProps) => node	-	Specifies a custom template for menu items. This function receives the entire item object as an argument and should return a React node that will replace the default content.
items	MenuItemProps[]	[ ]	Specifies menu items with their properties which will be rendered as ContextMenu. This array defines the structure and content of the menu.
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	React.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 ContextMenu.
onOpen	(event: Event) => void	Specifies the callback function that triggers before open the ContextMenu.
onSelect	(event: ContextMenuSelectEvent) => void	Specifies the callback function that triggers when selecting a ContextMenu item.

Context Menu Component

Usage

Demos

Props

Events