Implementing Syncfusion ContextMenu

When to Use This Skill

• Display context-sensitive menus triggered by right-click or long-touch on target elements
• Create nested multi-level menus with hierarchical menu item structures
• Add icons and visual indicators to menu items using CSS icon classes
• Implement navigation links within menu items to route to different pages
• Handle menu item selection with programmatic or event-driven logic
• Customize menu appearance with CSS classes, templates, and animations
• Support keyboard navigation for accessible menu interactions
• Enable scrollable menus for large numbers of menu items exceeding viewport
• Apply animations to submenu transitions with multiple effect options
• Persist component state between page reloads and maintain locale customization
• Support RTL (right-to-left) rendering for international applications
• Render custom item templates for complex menu item layouts beyond simple text

Component Overview

• Target-Based Triggering: Attach context menu to specific DOM elements via CSS selector
• Multi-Level Nesting: Support for submenu items nested within parent menu items
• Icon Support: Apply CSS icon classes (e.g., e-icons, Font Awesome) to menu items
• Navigation Integration: Direct navigation via URL property on menu items
• Rich Animations: Multiple transition effects (SlideDown, ZoomIn, FadeIn, None) with configurable duration
• Scrollable Content: Enable vertical scrolling for menus exceeding viewport height
• Template Customization: Define custom HTML templates for complex menu item layouts
• Event System: Capture menu lifecycle events (beforeOpen, onOpen, select, beforeClose, onClose)
• Item Rendering Hooks: Use beforeItemRender event to customize individual items per render
• Selector Filtering: Filter target elements within a container using CSS selector patterns
• Hover Delay: Configure delay duration before submenu appears on hover
• State Persistence: Automatically restore component state on page reloads
• Locale Support: Override global culture for component-specific localization
• RTL Support: Automatic right-to-left rendering for RTL languages
• HTML Sanitization: Optional sanitization of untrusted HTML content in menu items
• Submenu Behavior: Control whether submenus open on hover or click-only

Documentation and Navigation Guide

Getting Started

• Prerequisites and ASP.NET Core project setup
• NuGet package installation (Syncfusion.EJ2.AspNet.Core)
• TagHelper registration in _ViewImports.cshtml
• Stylesheet and script resource references
• Script Manager registration
• Basic ContextMenu implementation with target element
• Rendering first context menu with simple menu items
• Initial data binding with items property

Menu Items and Data Binding

• MenuItem structure and required properties (text, id)
• Data binding patterns using List and JSON objects
• Menu item properties: text, id, separator, iconCss, items, url
• Creating single-level and multi-level nested menus
• Separator usage for visual grouping (separator: true)
• Dynamic menu item updates and modifications
• Local data source patterns and data transformation

Icons, Navigation, and Customization

• iconCss property for adding icons to menu items
• e-icons CSS class for Syncfusion built-in icons
• URL property for navigation links in menu items
• Creating action vs navigation menu items
• Custom CSS classes for styling menu items (cssClass property)
• Hover delay configuration (hoverDelay property)
• Filter selector for target element matching (filter property)

Animation and Scrolling

• animationSettings configuration for submenu transitions
• Animation effects: None, SlideDown, ZoomIn, FadeIn
• Duration and easing properties for animation timing
• enableScrolling property for handling large menu lists
• Vertical scrolling behavior for overflow menu items
• BeforeOpen event for dynamic menu height adjustment
• Performance considerations for scrollable menus

Templates and Custom Rendering

• itemTemplate property for custom menu item layouts
• beforeItemRender event for individual item customization
• Rendering custom HTML within menu items
• Adding UI components (checkboxes, inputs) to menu items
• Event arguments in beforeItemRender (name property in MenuEventArgs)
• Dynamic item HTML generation based on data
• CSS customization through rendered elements

Event Handling and Integration

• select event for menu item selection/click handling
• beforeOpen event triggered before submenu opens
• beforeClose event triggered before menu closes
• onOpen event triggered when submenu is opened
• onClose event triggered when menu closes
• beforeItemRender event for render-time customization
• created event indicating component initialization complete
• Event-driven menu operations and conditional logic

Quick Start Example

@page
@model IndexModel

<div id="target">Right-click me</div>

<ejs-contextmenu id="contextmenu" target="#target" items="Model.MenuItems"></ejs-contextmenu>

public class IndexModel : PageModel
{
    public List<object> MenuItems { get; set; }
    
    public void OnGet()
    {
        MenuItems = new List<object>
        {
            new { text = "Cut", id = "cut", iconCss = "e-icons e-cut" },
            new { text = "Copy", id = "copy", iconCss = "e-icons e-copy" },
            new { text = "Paste", id = "paste", iconCss = "e-icons e-paste" },
            new { separator = true },
            new { 
                text = "Font", 
                id = "font",
                items = new List<object>
                {
                    new { text = "Bold", id = "bold" },
                    new { text = "Italic", id = "italic" }
                }
            }
        };
    }
}

Common Patterns

Key Properties

target

items

animationSettings

enableScrolling

hoverDelay

showcItemOnClick

itemTemplate

cssClass

filter

enableRtl

enablePersistence

locale

enableHtmlSanitizer

Common Use Cases

Next Steps

• Review the API Reference for complete property and method documentation
• Combine ContextMenu with other navigation components (Toolbar, Sidebar) for comprehensive UI
• Implement keyboard shortcuts alongside context menu for enhanced accessibility
• Test RTL rendering if targeting international audiences
• Consider performance implications when rendering large menu lists (>100 items)