React Context Menu Component – Customizable Right-Click Menu UI

Overview

The React Context Menu is a user interface element that appears upon a right-click or touch-and-hold gesture. It allows you to display menu items, supports nested (multilevel) menus, and allows event handlers to be attached to each item for smooth integration with other components.

React Context Menu code example

Get started with the React Context Menu using a few simple lines of TSX code, as demonstrated below. Also, explore this React Context Menu demo, which shows how to render and configure the Context Menu in React.

import { ContextMenu, MenuItem } from '@syncfusion/react-navigations';
import { useRef } from 'react';
import { CopyIcon, CutIcon} from '@syncfusion/react-icons';

export default function App() {
    const targetRef = useRef<HTMLImageElement>(null);

    return (
        <div className="component-section">
            <img ref={targetRef} src={'https://react.syncfusion.com/images/tooltip/mountain.png'} alt="Mountain" className='context-menu-image' />
            <ContextMenu targetRef={targetRef as React.RefObject<HTMLElement>}>
                <MenuItem text="Cut" icon={<CutIcon />} />
                <MenuItem text="Copy" icon={<CopyIcon />} />
            </ContextMenu>
        </div>
    );
};

Multilevel menu

The React Context Menu supports multilevel nested items. Submenus can be accessed by hovering over or clicking on menu items. On a desktop, nested items are displayed in multiple layers, while on a mobile device, they appear in a single layer with an option to navigate back to the parent item.

• Multilevel nesting demo

Web accessibility

• Fully supports WAI-ARIA for working with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Follows WCAG 2.0 standards in the design of UI visual elements such as foreground color, background color, line spacing, text, and images.
• Supports right-to-left (RTL) text rendering for users working in right-to-left languages like Hebrew, Arabic, or Persian.