syncfusion-aspnetcore-menu

实现菜单组件

当您需要构建包含层级项目、图标、动画和事件处理的导航菜单系统时，本指南将为您提供使用 Syncfusion Core Menu 组件的完整指导。

何时使用本指南

在以下情况下使用本指南：

• 显示包含嵌套项目的层级导航菜单
• 从数组或自引用结构绑定菜单数据
• 使用图标、动画和样式自定义菜单外观
• 处理用户交互（点击、选择、打开/关闭）
• 支持无障碍功能（RTL、汉堡模式、滚动）
• 创建响应式菜单布局并动态管理项目

组件概览

Menu 是一种图形用户界面组件，可作为应用或网站的导航栏。它支持：

• 数据绑定：层级或自引用数据结构
• 自定义：图标、模板、动画，以及通过 CSS 设置样式
• 用户交互：打开、关闭、选择和项目渲染事件
• 无障碍功能：RTL 支持、持久化、键盘导航
• 高级功能：汉堡模式、滚动、悬停效果

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 创建您的第一个菜单
• 基本项目结构（层级）
• CSS 导入和主题
• TagHelper 语法基础

菜单项目与数据绑定

📄 阅读： references/menu-items-and-data-binding.md

• 项目结构（MenuItemModel）
• 使用内联数组设置 Items 属性
• 层级数据绑定
• 自引用数据结构
• 使用 FieldSettings 映射自定义数据

自定义与样式

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

• 使用 cssClass 属性自定义样式
• 主题自定义
• 支持用于高级布局的模板
• 菜单项目样式模式
• 动画配置

图标、子菜单与层级结构

📄 阅读： references/icons-submenus-and-hierarchy.md

• 使用 iconCss 添加图标
• 使用嵌套项目创建子菜单
• 多级层级结构
• 分隔符项目
• 组织复杂的菜单结构

事件与用户交互

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

• 事件名称：beforeOpen、beforeClose、onOpen、onClose、select、beforeItemRender、created
• 事件处理程序模式
• BeforeOpenCloseMenuEventArgs 属性
• OpenCloseMenuEventArgs 属性
• MenuEventArgs 属性
• 事件中的条件逻辑

方法与公共 API

📄 阅读： references/methods-and-public-api.md

• 生命周期方法（appendTo、refresh、destroy、dataBind）
• 项目管理（enableItems、hideItems、showItems、setItem、getItemIndex）
• 插入/移除项目（insertAfter、insertBefore、removeItems）
• 汉堡模式控制（open、close）
• 事件处理（addEventListener、removeEventListener）
• 模块注入（Inject）
• 实用实现模式
• 方法使用最佳实践

方向与无障碍功能

📄 阅读： references/orientation-and-accessibility.md

• 水平与垂直方向
• RTL（enableRtl）支持
• 用于响应式设计的汉堡模式
• 持久化（enablePersistence）
• 大型菜单的滚动（enableScrolling）
• HTML 清理（enableHtmlSanitizer）

API 参考

📄 阅读： references/api-reference.md

• 完整属性参考
• 事件声明
• MenuAnimationSettingsModel 选项
• FieldSettingsModel 配置
• MenuItem 属性
• 枚举值（Orientation、MenuEffect）

快速入门示例

创建一个包含三个垂直项目的基本菜单：

@{
    List<object> menuItems = new List<object>();
    menuItems.Add(new { text = "File" });
    menuItems.Add(new { text = "Edit" });
    menuItems.Add(new { text = "View" });
}

<ejs-menu id="menu" items="menuItems"></ejs-menu>

包含子菜单：

@{
    var menuItems = new List<object> {
        new {
            text = "File",
            items = new List<object> {
                new { text = "New" },
                new { text = "Open" },
                new { text = "Save" }
            }
        },
        new {
            text = "Edit",
            items = new List<object> {
                new { text = "Cut" },
                new { text = "Copy" },
                new { text = "Paste" }
            }
        }
    };
}

<ejs-menu id="menu" items="menuItems"></ejs-menu>

常见模式

模式 1：通过字段映射进行数据绑定

使用自定义数据结构时，可通过 fields 属性映射字段：

<ejs-menu id="menu" items="ViewBag.menuData" fields="ViewBag.menuFields"></ejs-menu>

控制器：

var menuFields = new { text = "name", children = "submenu", iconCss = "icon" };

模式 2：事件处理

附加事件处理程序，以响应用户交互：

<ejs-menu id="menu" 
    items="menuItems"
    select="onMenuSelect"
    beforeOpen="onBeforeOpen">
</ejs-menu>

模式 3：带图标的水平菜单

创建支持图标的水平菜单：

<ejs-menu id="menu" 
    items="menuItems"
    orientation="Horizontal"
    enableRtl="false">
</ejs-menu>

模式 4：RTL 和无障碍功能

为不同地区启用无障碍功能：

<ejs-menu id="menu" 
    items="menuItems" 
    locale="ar-AE"
    enableRtl="true"
    enablePersistence="true">
</ejs-menu>

关键属性摘要

属性	类型	用途
items	MenuItemModel[]	菜单项数组
orientation	Orientation	水平或垂直（默认：Vertical）
fields	FieldSettingsModel	数据绑定字段映射
cssClass	string	用于设置样式的自定义 CSS 类
enableRtl	boolean	从右到左的文本方向
enablePersistence	boolean	在页面重新加载期间保留状态
enableScrolling	boolean	为溢出内容启用滚动
hamburgerMode	boolean	响应式移动菜单模式
animationSettings	MenuAnimationSettingsModel	子菜单动画配置
hoverDelay	number	悬停后子菜单打开前的毫秒数
template	string | Function	自定义菜单项模板

常见用例

导航栏：创建带图标和样式的多级网站导航菜单

应用程序菜单栏：实现支持键盘操作的传统“文件/编辑/视图”菜单栏

移动导航：使用汉堡菜单模式实现响应式移动导航

上下文菜单：根据用户操作和数据显示动态菜单

本地化菜单：支持多种语言和 RTL 布局

---

后续步骤： 根据需要选择上方的参考文件。如果你刚开始使用 Menu 组件，请从 getting-started.md 开始。