Implements Syncfusion React ContextMenu (SfContextMenu) for right-click interactions and context-sensitive popup menus. Use this when adding menu items, handling selection events, or customizing templates and styling. Covers setup, data binding, accessibility, keyboard navigation, common methods and

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](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). Example: Trigger on specific element items (Required) Type: MenuItemModel[] Array of menu items to display. Each item can have text, icons, nested items, separators, etc. 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) 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. enableScrolling Type: boolean (default: false) Enable scrolling when menu height exceeds available space. 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. hoverDelay Type: number (default: 400) Milliseconds to wait before displaying submenu on hover. 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. Data & Content Properties itemTemplate Type: string Function Custom HTML template for menu items. Use template string with property placeholders ( ${propertyName} ). locale Type: string (default: 'en US') Set localization language for component. Overrides global culture setting. Security & State Properties enableHtmlSanitizer Type: boolean (default: true) Enable HTML sanitization to prevent XSS attacks. Sanitizes untrusted HTML in menu items. enablePersistence Type: boolean (default: false) Persist component state (expanded/collapsed state) across page reloads using browser storage. enableRtl Type: boolean (default: false) Enable right to left (RTL) layout for Arabic, Hebrew, and other RTL languages. 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. id Type: string Unique identifier for the menu item. Use for identifying items in event handlers or programmatic operations. iconCss Type: string CSS class for icon display. Supports Syncfusion icons or custom icon classes. Item Structure items Type: MenuItemModel[] Nested submenu items. Creates hierarchical menu structure. separator Type: boolean (default: false) Render as a visual separator line instead of a clickable item. Navigation url Type: string Navigation URL. Creates an anchor link that navigates when clicked. Custom Attributes htmlAttributes Type: Record<string, string Add custom HTML attributes to menu item element. 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) left : Horizontal position (X coordinate in pixels) target : Optional HTML element for z index calculation close(): void Programmatically close the context menu. Item Visibility Control showItems(items: string[], isUniqueId?: boolean): void Show menu items that were previously hidden. Parameters: items : Array of item text or IDs to show isUniqueId : If true, treat items as unique IDs; if false, treat as text (default: false) hideItems(items: string[], isUniqueId?: boolean): void Hide specific menu items from display while keeping them in the menu structure. Parameters: items : Array of item text or IDs to hide isUniqueId : If true, treat items as unique IDs Item State Management enableItems(items: string[], enable: boolean, isUniqueId?: boolean): void Enable or disable menu items to control interactivity. Parameters: items : Array of item text or IDs to modify enable : true to enable, false to disable isUniqueId : If true, treat items as unique IDs Item Manipulation insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void Insert new menu items after a specified target item. Parameters: items : Array of new MenuItemModel items to insert text : Text or ID of target item to insert after isUniqueId : If true, treat text as unique ID insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void Insert new menu items before a specified target item. removeItems(items: string[], isUniqueId?: boolean): void Remove menu items from the menu. Parameters: items : Array of item text or IDs to remove isUniqueId : If true, treat items as unique IDs Item Queries getItemIndex(item: MenuItem string, isUniqueId?: boolean): number[] Get the index/indices of a menu item. Returns array because item can exist at multiple levels (for nested items). Parameters: item : MenuItem object or text/ID string to find isUniqueId : If true, treat item as unique ID Returns: number[] Array of index numbers representing item position setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void Update an existing menu item's properties. Parameters: item : MenuItem object with updated properties id : Text or ID of item to update isUniqueId : If true, treat id as unique ID Component Lifecycle destroy(): void Destroy the ContextMenu component and free resources. Events & Event Arguments The ContextMenu component provides 7 events for monitoring and controlling user interactions: Menu Lifecycle Events beforeOpen Type: EmitType<BeforeOpenCloseMenuEventArgs Fires before the menu opens. Use to prevent opening, modify items, or prepare data. Event Arguments: Example: Prevent opening in certain conditions onOpen Type: EmitType<OpenCloseMenuEventArgs Fires after the menu opens. Use to initialize UI or perform post open actions. Event Arguments: Example: Initialize after opening beforeClose Type: EmitType<BeforeOpenCloseMenuEventArgs Fires before the menu closes. Use to prevent closing or save state. Example: Prevent closing on unsaved changes onClose Type: EmitType<OpenCloseMenuEventArgs Fires after the menu closes. Use for cleanup or state management. Example: Clean up after menu closes Item Interaction Events select Type: EmitType<MenuEventArgs Fires when a menu item is clicked/selected. Use to execute actions based on selection. Event Arguments: Example: Execute actions on item selection beforeItemRender Type: EmitType<MenuEventArgs Fires before each menu item renders. Use to customize item appearance or add custom logic. Example: Conditionally disable items Component Lifecycle created Type: EmitType<Event Fires after the component is fully created and rendered. Use for initialization. Example: Initialize after creation Menu Items and Data Binding 📄 Read: [references/menu items and data binding.md](references/menu items and data binding.md) Creating menu items with MenuItemModel Using the items property Data binding with local data sources Dynamic menu item generation from arrays Nested submenu configuration Templates and Customization 📄 Read: [references/templates and customization.md](references/templates and customization.md) Custom item templates (itemTemplate) Rendering rich content in menu items beforeItemRender event for item customization Adding icons and metadata to items Conditional rendering Styling and Appearance 📄 Read: [references/styling and appearance.md](references/styling and appearance.md) CSS class customization Theme Studio integration Custom CSS overrides for menu elements Icon styling and positioning Visual states (hover, selected, disabled) Accessibility and Keyboard Navigation 📄 Read: [references/accessibility and keyboard navigation.md](references/accessibility and keyboard navigation.md) WCAG 2.2 and Section 508 compliance Screen reader support and ARIA attributes Keyboard shortcuts (Esc, Enter, arrow keys) Right to left (RTL) support Focus management Advanced Features 📄 Read: [references/advanced features.md](references/advanced features.md) Scrollable context menus Animation settings and effects Menu open types and positioning Overflow handling and dynamic layouts Configuration for complex scenarios Use Cases and Patterns 📄 Read: [references/use cases and patterns.md](references/use cases and patterns.md) Common context menu patterns Adding/removing/enabling/disabling items dynamically Rendering separators between items Multi level nesting examples Real world integration scenarios Quick Reference Essential Code Template Common Methods Reference Next Steps: Choose reference based on your need. Start with [getting started.md](references/getting started.md), or explore specific features in other references.

syncfusion-react-context-menu