syncfusion-blazor-context-menu

name	syncfusion-blazor-context-menu
description	Implement Syncfusion Blazor ContextMenu component for building right-click menus, context-sensitive navigation, or popup menu systems. Use this when you need hierarchical menu structures with nesting support, data binding, or custom templates. This skill covers setup, customization, events, and dynamic menu management.
metadata	{"author":"Syncfusion Inc","version":"33.1.44","category":"Navigation Components"}

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

Property	Type	Purpose
Target	string	CSS selector for right-click target element
Items	List	Data collection for data-binding
TValue	generic	Type parameter (usually MenuItem)
CssClass	string	Custom CSS class for component styling
ShowItemOnClick	bool	Enable sub-menu on click instead of hover
EnableScrolling	bool	Enable scroll for large menu lists

---

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