React Context Menu

The ContextMenu component provides a popup menu that appears when a user interacts with an element through right-click or a long press action. It offers a convenient way to present contextual options and commands relevant to the selected element or area.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the React ContextMenu component to the project.

Installing Syncfusion® React packages

To use the React ContextMenu component in this project, the @syncfusion/react-navigations package needs to be installed using the following command:

npm install @syncfusion/react-navigations

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the ContextMenu component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-navigations/styles/material.css';

Adding Context Menu component

To include the ContextMenu component in your application, import the ContextMenu from the @syncfusion/react-navigations package in App.tsx.

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

Add the ContextMenu component in application as shown in below code example.

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

export default function App() {
    const targetRef = useRef<HTMLImageElement>(null);
    return (
        <div className="component-section">
            <img ref={targetRef} src={'/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 />} />
                <MenuItem text="Rename" icon={<RenameIcon />} />
            </ContextMenu>
        </div>
    );
};

Run the project

To run the project, use the following command:

npm run dev

The ContextMenu component uses the targetRef prop to specify which element triggers the menu. Menu options are defined using MenuItem components, which can include text and icon.

Custom Icons

Beyond simple text menu items, the ContextMenu supports rich content through component composition within MenuItem and the itemTemplate prop. Using component composition allows for custom content in each menu item, while the itemTemplate prop provides a consistent template for all items. Both approaches enable advanced customization with icons, layout formatting, and custom styling to create visually distinctive menu interactions.

Animation Effects

The animation property enhances user experience by providing visual feedback when menus appear. Multiple effects are available including FadeIn, ZoomIn, and SlideDown, with configurable duration and easing functions.

Scrollable Menu

For data-heavy menus, the items property enables programmatic menu creation using the MenuItemProps interface as an alternative to declarative definition. The className prop can be used with CSS to create scrollable menus when content exceeds view limits, with a default max height of 500px that can be customized (shown here with a 200px constraint).

Image Gallery

Action Menu

Interactive menus can be implemented using the onSelect event handler to process user selections, while the controlled component pattern (open and onClose props) enables precise management of menu visibility.

Accessibility

The ContextMenu component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the ContextMenu component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The ContextMenu component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the ContextMenu component:

Keyboard interaction

The ContextMenu component follows the keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported: