syncfusion-aspnetcore-menu

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Menu Component

实现Menu组件

When you need to build a navigational menu system with hierarchical items, icons, animations, and event handling, this skill provides complete guidance for using the Syncfusion Core Menu component.

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

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Display hierarchical navigation menus with nested items
Bind menu data from arrays or self-referential structures
Customize menu appearance with icons, animations, and styling
Handle user interactions (click, selection, open/close)
Support accessibility features (RTL, hamburger mode, scrolling)
Create responsive menu layouts with dynamic item management

使用本技能当你需要：

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

Component Overview

组件概述

The Menu is a graphical user interface component that serves as a navigation header for applications or sites. It supports:

Data Binding: Hierarchical or self-referential data structures
Customization: Icons, templates, animations, styling via CSS
User Interaction: Events for open, close, select, and item render
Accessibility: RTL support, persistence, keyboard navigation
Advanced Features: Hamburger mode, scrolling, hover effects

Menu是作为应用或网站导航头部的图形用户界面组件。它支持：

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

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package setup
Creating your first menu
Basic item structure (hierarchical)
CSS imports and themes
TagHelper syntax fundamentals

📄 阅读： references/getting-started.md

安装与包配置
创建你的第一个菜单
基础项结构（层级式）
CSS导入与主题
TagHelper语法基础

Menu Items and Data Binding

菜单项与数据绑定

📄 Read: references/menu-items-and-data-binding.md

Item structure (MenuItemModel)
Items property with inline arrays
Hierarchical data binding
Self-referential data structure
FieldSettings mapping for custom data

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

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

Customization and Styling

自定义与样式设置

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

cssClass property for custom styling
Theme customization
Template support for advanced layouts
Menu item styling patterns
Animation configuration

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

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

Icons, Sub-menus, and Hierarchy

图标、子菜单与层级结构

📄 Read: references/icons-submenus-and-hierarchy.md

Adding icons with iconCss
Creating sub-menus with nested items
Multi-level hierarchies
Separator items
Organizing complex menu structures

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

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

Events and User Interactions

事件与用户交互

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

Event names: beforeOpen, beforeClose, onOpen, onClose, select, beforeItemRender, created
Event handler patterns
BeforeOpenCloseMenuEventArgs properties
OpenCloseMenuEventArgs properties
MenuEventArgs properties
Conditional logic in events

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

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

Methods and Public API

方法与公开API

📄 Read: references/methods-and-public-api.md

Lifecycle methods (appendTo, refresh, destroy, dataBind)
Item management (enableItems, hideItems, showItems, setItem, getItemIndex)
Item insertion/removal (insertAfter, insertBefore, removeItems)
Hamburger mode control (open, close)
Event handling (addEventListener, removeEventListener)
Module injection (Inject)
Practical implementation patterns
Best practices for method usage

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

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

Orientation and Accessibility

方向与无障碍功能

📄 Read: references/orientation-and-accessibility.md

Horizontal vs Vertical orientation
RTL (enableRtl) support
Hamburger mode for responsive design
Persistence (enablePersistence)
Scrolling (enableScrolling) for large menus
HTML sanitization (enableHtmlSanitizer)

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

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

API Reference

API参考

📄 Read: references/api-reference.md

Complete property reference
Event declarations
MenuAnimationSettingsModel options
FieldSettingsModel configuration
MenuItem properties
Enum values (Orientation, MenuEffect)

📄 阅读： references/api-reference.md

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

Quick Start Example

快速入门示例

Create a basic menu with three vertical items:

html

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

With sub-menus:

html

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

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

html

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

带有子菜单的示例：

html

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

Common Patterns

常见模式

Pattern 1: Data Binding with Fields Mapping

模式1：字段映射的数据绑定

When you have custom data structures, map fields using the

fields

property:

html

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

Controller:

csharp

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

当你有自定义数据结构时，使用

fields

属性映射字段：

html

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

控制器：

csharp

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

Pattern 2: Event Handling

模式2：事件处理

Attach event handlers to respond to user interactions:

html

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

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

html

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

Pattern 3: Horizontal Menu with Icons

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

Create a horizontal menu with icon support:

html

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

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

html

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

Pattern 4: RTL and Accessibility

模式4：RTL与无障碍功能

Enable accessibility features for different locales:

html

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

为不同区域设置启用无障碍功能：

html

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

Key Properties Summary

关键属性总结

Property	Type	Purpose
`items`	MenuItemModel[]	Menu items array
`orientation`	Orientation	Horizontal or Vertical (default: Vertical)
`fields`	FieldSettingsModel	Data binding field mappings
`cssClass`	string	Custom CSS class for styling
`enableRtl`	boolean	Right-to-left text direction
`enablePersistence`	boolean	Persist state between page reloads
`enableScrolling`	boolean	Enable scrolling for overflow content
`hamburgerMode`	boolean	Responsive mobile menu mode
`animationSettings`	MenuAnimationSettingsModel	Sub-menu animation configuration
`hoverDelay`	number	Milliseconds before sub-menu opens on hover
`template`	string \| Function	Custom item template

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

Common Use Cases

常见用例

Navigation Header: Create a multi-level site navigation menu with icons and styling

Application Menu Bar: Implement traditional File/Edit/View menu bar with keyboard support

Mobile Navigation: Use hamburger mode for responsive mobile navigation

Contextual Menu: Display dynamic menus based on user actions and data

Localized Menu: Support multiple languages and RTL layouts

Next Steps: Select a reference file above based on your needs. Start with getting-started.md if you're new to the Menu component.

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

应用菜单栏：实现带有键盘支持的传统文件/编辑/查看菜单栏

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

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

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

下一步： 根据你的需求选择上面的参考文件。如果你是Menu组件的新手，请从getting-started.md开始。