syncfusion-blazor-context-menu

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor ContextMenu Component

Syncfusion Blazor ContextMenu 组件

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.

在以下场景使用Syncfusion Blazor ContextMenu技能：

为交互元素构建右键上下文菜单
创建由用户交互触发的弹出导航菜单
需要支持嵌套的层级菜单结构
实现带有快捷键或图标的自定义菜单模板
管理动态菜单状态（启用/禁用菜单项）
需要来自自定义对象集合的数据驱动菜单
构建包含对话框、动画或滚动功能的高级交互

ContextMenu提供完全可定制的、事件驱动的弹出菜单，非常适合在Web应用中实现类桌面的交互体验。

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

📄 阅读： references/getting-started.md

NuGet安装（导航组件包 + 主题包）
命名空间导入与Syncfusion服务注册
样式表与脚本资源配置
基础ContextMenu组件标记
首次渲染与点击测试验证
Blazor项目的常见导入模式

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

📄 阅读： references/customization-and-nesting.md

用于丰富UI的自定义MenuTemplate（快捷键、徽章、图标）
用于组件级样式的CssClass属性
多层嵌套（2-3级嵌套）
嵌套MenuItem层级结构
菜单深度与用户体验的最佳实践

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.)

📄 阅读： references/icons-and-navigation.md

IconCss属性与e-icons类映射
自定义图标类支持
菜单项中的图标定位
用于超链接导航的Url属性
导航目标行为（_blank、_self等）

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

📄 阅读： references/styling-and-appearance.md

CSS类覆盖参考（.e-contextmenu-container、.e-menu-item等）
焦点与选中状态样式
使用Theme Studio自定义主题
常见样式模式与示例

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

📄 阅读： references/events-and-interactions.md

ItemSelected事件绑定与模式
MenuEventArgs数据访问
带坐标的程序化打开/关闭方法
手动菜单控制与触发
事件处理程序最佳实践

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

📄 阅读： references/data-binding.md

Items集合绑定
MenuFieldSettings属性映射
自定义对象数据源
嵌套集合的层级数据绑定
动态菜单填充

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

📄 阅读： references/menu-item-management.md

用于项状态管理的Disabled属性
启用/禁用逻辑与工作流
用于条件禁用的OnOpen事件
Separator属性的使用与样式
动态控制项的可用性

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

📄 阅读： references/advanced-features.md

带有动画效果的MenuAnimationSettings（FadeIn、SlideDown、ZoomIn、None）
与ItemSelected事件集成的对话框
针对大型菜单列表的EnableScrolling
ScrollHeight配置
大型菜单处理策略

Quick Start Example

快速入门示例

cshtml

@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.

cshtml

@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>

**效果：**右键点击灰色区域，即可查看包含剪切、复制、粘贴选项的上下文菜单。

Common Patterns

常见模式

Pattern 1: Basic Right-Click Menu

模式1：基础右键菜单

cshtml

<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.

cshtml

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

**适用场景：**目标元素上带有基础操作的简单菜单。

Pattern 2: Nested Menu (Submenu on Hover)

模式2：嵌套菜单（悬停显示子菜单）

cshtml

<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.

cshtml

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

**适用场景：**带有分组操作的层级菜单结构。

Pattern 3: Event-Driven Actions

模式3：事件驱动操作

cshtml

<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.

cshtml

<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
    }
}

**适用场景：**需要在菜单项点击时执行自定义逻辑。

Pattern 4: Dynamic Menu from Data

模式4：从数据源生成动态菜单

cshtml

<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.

cshtml

<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; } }
}

**适用场景：**菜单项来自数据库或动态数据源。

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

属性	类型	用途
`Target`	string	右键触发目标元素的CSS选择器
`Items`	List	用于数据绑定的集合
`TValue`	泛型	类型参数（通常为 `MenuItem` ）
`CssClass`	string	用于组件样式的自定义CSS类
`ShowItemOnClick`	bool	启用点击显示子菜单而非悬停
`EnableScrolling`	bool	为大型菜单列表启用滚动

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

用例1：文件上下文菜单

右键点击文件列表项 → 剪切、复制、粘贴、删除、重命名选项
参考文档： events-and-interactions.md + menu-item-management.md

用例2：富文本编辑器

右键点击文本 → 加粗、斜体、下划线、链接选项
自定义带有图标和快捷键的模板
参考文档： customization-and-nesting.md + icons-and-navigation.md

用例3：管理后台仪表盘

右键点击用户行 → 查看、编辑、权限设置、删除
根据用户角色启用/禁用选项
参考文档： menu-item-management.md + events-and-interactions.md

用例4：导航菜单

点击按钮 → 打开菜单 → 导航至页面
带有流畅动画的嵌套分类
参考文档： icons-and-navigation.md + advanced-features.md

Next Steps

下一步

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

开始： 阅读getting-started.md完成安装与配置
构建： 使用customization-and-nesting.md实现自定义UI
增强： 结合其他参考指南添加图标、事件与交互功能
探索： 查看advanced-features.md了解动画、对话框与滚动功能