Imported from syncfusion/blazor-ui-components-skills (skills/syncfusion-blazor-context-menu/SKILL.md). Install upstream with npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-context-menu. Copyright stays with the author.

Syncfusion Blazor ContextMenu Component

When to Use This Skill

Use the Syncfusion Blazor ContextMenu skill when:

• Building right-click context menus for interactive elements
• Creating popup navigation menus triggered by user interaction
• Need hierarchical menu structures with nesting support
• Implementing custom menu templates with shortcuts or icons
• Managing dynamic menu states (enable/disable items)
• Requiring data-driven menus from custom object collections
• Building advanced interactions with dialogs, animations, or scrolling

ContextMenu provides fully customizable, event-driven popup menus perfect for desktop-like interactions in web apps.

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet installation (Navigations + Themes packages)
• Namespace imports and Syncfusion service registration
• Stylesheet and script resource setup
• Basic ContextMenu component markup
• First render and click-to-test validation
• Common import patterns for Blazor projects

Customization and Nesting

📄 Read: references/customization-and-nesting.md

• Custom MenuTemplate for rich UI (shortcuts, badges, icons)
• CssClass property for component-level styling
• Multilevel nesting (2-3 nested levels)
• Nested MenuItem hierarchies
• Best practices for menu depth and UX

Icons and Navigation

📄 Read: references/icons-and-navigation.md

• IconCss property and e-icons class mapping
• Custom icon class support
• Icon positioning in menu items
• Url property for hyperlink navigation
• Navigation target behaviors (_blank, _self, etc.)

Styling and Appearance

📄 Read: references/styling-and-appearance.md

• CSS class override reference (.e-contextmenu-container, .e-menu-item, etc.)
• Focus and selected state styling
• Theme customization with Theme Studio
• Common styling patterns and examples

Events and Interactions

📄 Read: references/events-and-interactions.md

• ItemSelected event binding and patterns
• MenuEventArgs data access
• Programmatic Open/Close methods with coordinates
• Manual menu control and triggering
• Event handler best practices

Data Binding

📄 Read: references/data-binding.md

• Items collection binding
• MenuFieldSettings property mapping
• Custom object data sources
• Hierarchical data binding with nested collections
• Dynamic menu population

Menu Item Management

📄 Read: references/menu-item-management.md

• Disabled property for item state management
• Enable/disable logic and workflows
• OnOpen event for conditional disabling
• Separator property usage and styling
• Controlling item availability dynamically

Advanced Features

📄 Read: references/advanced-features.md

• MenuAnimationSettings with effects (FadeIn, SlideDown, ZoomIn, None)
• Dialog integration with ItemSelected events
• EnableScrolling for large menu lists
• ScrollHeight configuration
• Large menu handling strategies

Quick Start Example

@using Syncfusion.Blazor.Navigations

<div id="target">Right click to open menu</div>

<SfContextMenu Target="#target" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Cut"></MenuItem>
        <MenuItem Text="Copy"></MenuItem>
        <MenuItem Text="Paste"></MenuItem>
    </MenuItems>
</SfContextMenu>

<style>
    #target {
        border: 1px dashed; height: 150px; padding: 10px;
        position: relative; text-align: center; color: gray;
    }
</style>

Result: Right-click the gray area to see the context menu with Cut, Copy, Paste options.

Common Patterns

Pattern 1: Basic Right-Click Menu

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Edit"></MenuItem>
        <MenuItem Text="Delete"></MenuItem>
    </MenuItems>
</SfContextMenu>

Use when: Simple menu with basic actions on target element.

Pattern 2: Nested Menu (Submenu on Hover)

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
            </MenuItems>
        </MenuItem>
    </MenuItems>
</SfContextMenu>

Use when: Hierarchical menu structure with grouped actions.

Pattern 3: Event-Driven Actions

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Delete"></MenuItem>
    </MenuItems>
    <MenuEvents TValue="MenuItem" ItemSelected="@OnItemSelected"></MenuEvents>
</SfContextMenu>

@code {
    private void OnItemSelected(MenuEventArgs<MenuItem> e) {
        // Handle: e.Item.Text
    }
}

Use when: Need to execute custom logic on menu item click.

Pattern 4: Dynamic Menu from Data

<SfContextMenu Target="#myElement" Items="@menuItems">
    <MenuFieldSettings Text="Title"></MenuFieldSettings>
</SfContextMenu>

@code {
    private List<MenuOption> menuItems = new();
    
    protected override void OnInitialized() {
        menuItems.Add(new MenuOption { Title = "Option 1" });
        menuItems.Add(new MenuOption { Title = "Option 2" });
    }
    
    private class MenuOption { public string Title { get; set; } }
}

Use when: Menu items come from database or dynamic source.

Key Properties

Common Use Cases

Use Case 1: File Context Menu

• Right-click file list item → Cut, Copy, Paste, Delete, Rename options
• Reference: events-and-interactions.md + menu-item-management.md

Use Case 2: Rich Text Editor

• Right-click text → Bold, Italic, Underline, Link options
• Customize template with icons and shortcuts
• Reference: customization-and-nesting.md + icons-and-navigation.md

Use Case 3: Admin Dashboard

• Right-click user row → View, Edit, Permissions, Delete
• Enable/disable based on user role
• Reference: menu-item-management.md + events-and-interactions.md

Use Case 4: Navigation Menu

• Click button → Open menu → Navigate to pages
• Nested categories with smooth animation
• Reference: icons-and-navigation.md + advanced-features.md

Next Steps

1. Start: Read getting-started.md to install and setup
2. Build: Use customization-and-nesting.md for custom UI
3. Enhance: Add icons, events, and interactivity with other reference guides
4. Explore: Check advanced-features.md for animations, dialogs, scrolling