Implementing Syncfusion ContextMenu

When to Use This Skill

Use the ContextMenu component when you need to:

• 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

The Syncfusion ContextMenu is a lightweight navigation component that displays a list of commands or menu items in response to user interactions, typically a right-click on a target element. It provides:

• 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

📄 Read: [references/getting-started.md](references/getting-started.md)

• 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

📄 Read: [references/menu-items-and-data-binding.md](references/menu-items-and-data-binding.md)

• 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

📄 Read: [references/icons-navigation-customization.md](references/icons-navigation-customization.md)

• 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

📄 Read: [references/animation-scrolling.md](references/animation-scrolling.md)

• 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

📄 Read: [references/templates-customization.md](references/templates-customization.md)

• 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

📄 Read: [references/event-handling.md](references/event-handling.md)

• 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

Razor Markup (Index.cshtml):

@page
@model IndexModel

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

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

PageModel (Index.cshtml.cs):

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

Common Use Cases

1. File Manager Context Menu Attach context menu to file list for Cut, Copy, Paste, Delete, Rename operations with icons.

2. Text Editor Toolbar Provide right-click access to formatting options (Bold, Italic, Underline) and text manipulation.

3. Data Grid Row Actions Context menu on grid rows for Edit, View, Delete, Export operations on selected rows.

4. Navigation Shortcuts Quick access menu providing links to different application sections or external resources.

5. Multi-Language Support Configure locale-specific formatting and override default culture for globalized applications.

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)