Syncfusion React Context Menu

Implementing Syncfusion React Context Menu

Complete API Reference & Feature Guide

When to Use This Skill

ALWAYS use this skill when users need to:

• Install and configure Syncfusion React ContextMenu component
• Create and manage menu items (text, icons, separators, nested menus, URLs)
• Programmatically control menus using 15+ methods
• Handle all 7 events with their respective event arguments
• Customize appearance with CSS classes, themes, templates, animations
• Bind data from local sources or dynamic data structures
• Implement accessibility (keyboard navigation, ARIA, RTL, WCAG 2.2)
• Manage dynamic menus (add, remove, show, hide, enable/disable)
• Create context-specific actions (files, editors, workflows)

Getting Started

📄 Read: references/getting-started.md

• Package installation (@syncfusion/ej2-react-navigations)
• Development environment setup (Vite, Create React App)
• CSS stylesheet imports and theme configuration
• Basic ContextMenu implementation
• Running and testing the application

Component Properties Reference

The ContextMenuComponent accepts 18+ configuration properties to control behavior, appearance, and interaction:

Essential Properties

target (Required)

Type: string

CSS selector for the element that triggers the context menu (right-click or touch-hold).

<ContextMenuComponent target="#myElement" items={menuItems} />

Example: Trigger on specific element

function App() {
  return (
    <div>
      <div id="target">Right-click here</div>
      <ContextMenuComponent target="#target" items={menuItems} />
    </div>
  );
}

items (Required)

Type: MenuItemModel[]

Array of menu items to display. Each item can have text, icons, nested items, separators, etc.

const menuItems: MenuItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  {
    text: 'More',
    items: [
      { text: 'Properties' },
      { text: 'Delete' }
    ]
  }
];

<ContextMenuComponent target="#target" items={menuItems} />

Display & Animation Properties

animationSettings

Type: MenuAnimationSettingsModel

Configure menu opening/closing animation effects.

Properties:

• effect: Animation type (None, SlideDown, ZoomIn, FadeIn)
• duration: Animation time in milliseconds (default: 400)
• easing: CSS easing function (default: ease)

const animationSettings = {
  effect: 'FadeIn',
  duration: 300,
  easing: 'ease-out'
};

<ContextMenuComponent
  target="#target"
  items={menuItems}
  animationSettings={animationSettings}
/>

Available Effects: | Effect | Description | |--------|-------------| | None | No animation | | SlideDown | Slide down from top | | ZoomIn | Zoom in effect | | FadeIn | Fade in opacity |

cssClass

Type: string

Add custom CSS classes to the ContextMenu wrapper for custom styling.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  cssClass="custom-menu dark-theme"
/>

enableScrolling

Type: boolean (default: false)

Enable scrolling when menu height exceeds available space.

<ContextMenuComponent
  target="#target"
  items={largeMenuList}
  enableScrolling={true}
/>

Interaction Properties

filter

Type: string

CSS selector for specific elements inside the target that should trigger the context menu. Use to limit context menu to certain child elements.

// Context menu only appears on table rows, not the entire table
<ContextMenuComponent
  target="#table"
  filter="tr"
  items={menuItems}
/>

hoverDelay

Type: number (default: 400)

Milliseconds to wait before displaying submenu on hover.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  hoverDelay={500}  // 500ms before submenu appears
/>

showItemOnClick

Type: boolean (default: false)

Force submenus to open only on click (not on hover). When true, arrow key navigation is required to open submenus.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  showItemOnClick={true}  // Submenus open on click only
/>

Data & Content Properties

itemTemplate

Type: string | Function

Custom HTML template for menu items. Use template string with property placeholders (${propertyName}).

const template = `
  <div class="menu-item">
    <span class="${iconCss}"></span>
    <span>${text}</span>
    <span class="shortcut">${shortcut}</span>
  </div>
`;

<ContextMenuComponent
  target="#target"
  items={menuItems}
  itemTemplate={template}
/>

locale

Type: string (default: 'en-US')

Set localization language for component. Overrides global culture setting.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  locale="es-ES"  // Spanish localization
/>

Security & State Properties

enableHtmlSanitizer

Type: boolean (default: true)

Enable HTML sanitization to prevent XSS attacks. Sanitizes untrusted HTML in menu items.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableHtmlSanitizer={true}  // Sanitize HTML content
/>

enablePersistence

Type: boolean (default: false)

Persist component state (expanded/collapsed state) across page reloads using browser storage.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enablePersistence={true}
/>

enableRtl

Type: boolean (default: false)

Enable right-to-left (RTL) layout for Arabic, Hebrew, and other RTL languages.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableRtl={true}
/>

Menu Item Model Properties

Each menu item is configured using MenuItemModel interface with the following properties:

Text & Display

text

Type: string

Display text for the menu item.

{ text: 'Cut' }
{ text: 'Copy' }

id

Type: string

Unique identifier for the menu item. Use for identifying items in event handlers or programmatic operations.

{ id: 'cut-item', text: 'Cut' }
{ id: 'copy-item', text: 'Copy' }

iconCss

Type: string

CSS class for icon display. Supports Syncfusion icons or custom icon classes.

{ text: 'Cut', iconCss: 'e-icons e-cut' }
{ text: 'Copy', iconCss: 'e-icons e-copy' }
{ text: 'Delete', iconCss: 'e-icons e-delete' }

Item Structure

items

Type: MenuItemModel[]

Nested submenu items. Creates hierarchical menu structure.

{
  text: 'File',
  items: [
    { text: 'New' },
    { text: 'Open' },
    { text: 'Save' }
  ]
}

separator

Type: boolean (default: false)

Render as a visual separator line instead of a clickable item.

const menuItems: MenuItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { separator: true },  // Visual divider
  { text: 'Delete' }
];

Navigation

url

Type: string

Navigation URL. Creates an anchor link that navigates when clicked.

{ text: 'Visit Site', url: 'https://example.com' }
{ text: 'Documentation', url: '/docs' }

Custom Attributes

htmlAttributes

Type: Record<string, string>

Add custom HTML attributes to menu item element.

{
  text: 'Download',
  htmlAttributes: {
    'data-action': 'download',
    'aria-label': 'Download file',
    'title': 'Download the file'
  }
}

Menu Methods – Programmatic Control

The ContextMenu exposes 15+ methods for runtime control and manipulation:

Menu State Control

open(top: number, left: number, target?: HTMLElement): void

Programmatically open the context menu at specified coordinates.

Parameters:

• top: Vertical position (Y-coordinate in pixels)