syncfusion-blazor-menu-bar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Menu Bar

实现Syncfusion Blazor Menu Bar

When to Use This Skill

何时使用该技能

Use this skill when you need to:

Create horizontal or vertical navigation menus in Blazor applications
Add dropdown submenus with multiple nesting levels
Display icons in menu items
Handle user interactions with menu events
Bind menu items to data sources
Apply animations and custom styling to menus
Build professional menu bars for web applications

在以下场景中可使用该技能：

在Blazor应用中创建水平或垂直导航菜单
添加支持多层嵌套的下拉子菜单
在菜单项中显示图标
通过菜单事件处理用户交互
将菜单项绑定到数据源
为菜单应用动画和自定义样式
为Web应用构建专业菜单栏

Component Overview

组件概述

The Syncfusion Blazor Menu Bar component provides a flexible, feature-rich menu system for navigation. It supports:

Hierarchical structure: Multiple levels of nested menu items
Data binding: Self-referential data source mapping
Events: Comprehensive event handling (Created, OnOpen, OnClose, Opened, Closed, ItemSelected, OnItemRender)
Styling: Icons, custom CSS, separators, and disabled states
Animation: Multiple animation effects (SlideDown, ZoomIn, FadeIn, None)
Orientation: Horizontal (default) or Vertical layout
Customization: Rich API for dynamic menu management

Syncfusion Blazor Menu Bar组件为导航提供了灵活且功能丰富的菜单系统，支持：

层级结构：多层嵌套菜单项
数据绑定：自引用数据源映射
事件：全面的事件处理（Created、OnOpen、OnClose、Opened、Closed、ItemSelected、OnItemRender）
样式：图标、自定义CSS、分隔符和禁用状态
动画：多种动画效果（SlideDown、ZoomIn、FadeIn、None）
布局方向：水平（默认）或垂直布局
自定义：用于动态菜单管理的丰富API

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package setup (NuGet packages)
Prerequisites and system requirements
Blazor WebAssembly App creation
Basic menu bar implementation
Imports and service registration
Theme stylesheet and script resources

📄 阅读： references/getting-started.md

安装与包配置（NuGet包）
前提条件与系统要求
创建Blazor WebAssembly应用
基础菜单栏实现
导入与服务注册
主题样式表与脚本资源

Menu Items and Data Binding

菜单项与数据绑定

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

MenuItem structure and properties (Text, Url, Separator, Disabled)
Creating hardcoded menu structures
Self-referential data source binding
MenuFieldSettings configuration (ItemId, ParentId, Text, Children)
Custom MenuItem classes and data models
Hierarchical menu creation patterns

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

MenuItem结构与属性（Text、Url、Separator、Disabled）
创建硬编码菜单结构
自引用数据源绑定
MenuFieldSettings配置（ItemId、ParentId、Text、Children）
自定义MenuItem类与数据模型
层级菜单创建模式

Events and Interactions

事件与交互

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

Available events (Created, OnItemRender, OnOpen, OnClose, Opened, Closed, ItemSelected)
MenuEvents component setup
Event handler implementation
TValue specification requirements
Capturing selected items and item data
User interaction patterns

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

可用事件（Created、OnItemRender、OnOpen、OnClose、Opened、Closed、ItemSelected）
MenuEvents组件配置
事件处理器实现
TValue指定要求
捕获选中项与项数据
用户交互模式

Icons and Styling

图标与样式

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

Adding icons with IconCss property
Icon positioning and placement
CSS custom icons (content, unicode)
Separators in menu items
Custom CSS classes
Navigation links with Url property
Disabled menu items

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

使用IconCss属性添加图标
图标定位与布局
CSS自定义图标（content、unicode）
菜单项中的分隔符
自定义CSS类
使用Url属性设置导航链接
禁用菜单项

Animation and Orientation

动画与布局方向

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

MenuAnimationSettings configuration
Animation effects (SlideDown, ZoomIn, FadeIn, None)
Duration customization
Orientation property (Horizontal, Vertical)
RTL support
Responsive menu behavior

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

MenuAnimationSettings配置
动画效果（SlideDown、ZoomIn、FadeIn、None）
时长自定义
Orientation属性（Horizontal、Vertical）
RTL支持
响应式菜单行为

Advanced Scenarios and Customization

高级场景与自定义

📄 Read: references/advanced-scenarios.md

ShowItemOnClick property for click-based opening
Add/Remove menu items dynamically
Enable/Disable menu items
Menu templates and custom rendering
Performance considerations
Common patterns and best practices

📄 阅读： references/advanced-scenarios.md

ShowItemOnClick属性（点击而非悬停打开子菜单）
动态添加/移除菜单项
启用/禁用菜单项
菜单模板与自定义渲染
性能考量
常见模式与最佳实践

API Reference

API参考

📄 Read: references/api-reference.md

Complete SfMenu component properties and methods
MenuItem component properties and structure
MenuAnimationSettings and MenuEffect enums
Orientation enum (Horizontal, Vertical)
MenuEvents and MenuEventArgs documentation
MenuFieldSettings for data binding
MenuTemplates for custom rendering
Complete integration example

📄 阅读： references/api-reference.md

SfMenu组件完整属性与方法
MenuItem组件属性与结构
MenuAnimationSettings与MenuEffect枚举
Orientation枚举（Horizontal、Vertical）
MenuEvents与MenuEventArgs文档
数据绑定用MenuFieldSettings
自定义渲染用MenuTemplates
完整集成示例

Quick Start Example

快速入门示例

razor

@using Syncfusion.Blazor.Navigations

<SfMenu TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
                <MenuItem Text="Exit"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Edit">
            <MenuItems>
                <MenuItem Text="Cut"></MenuItem>
                <MenuItem Text="Copy"></MenuItem>
                <MenuItem Text="Paste"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Help"></MenuItem>
    </MenuItems>
</SfMenu>

razor

@using Syncfusion.Blazor.Navigations

<SfMenu TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
                <MenuItem Text="Exit"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Edit">
            <MenuItems>
                <MenuItem Text="Cut"></MenuItem>
                <MenuItem Text="Copy"></MenuItem>
                <MenuItem Text="Paste"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Help"></MenuItem>
    </MenuItems>
</SfMenu>

Common Patterns

常见模式

Pattern 1: Simple Hardcoded Menu

模式1：简单硬编码菜单

Use direct MenuItem components for small, static menus. This is the simplest approach and requires no data binding setup.

直接使用MenuItem组件创建小型静态菜单。这是最简单的方法，无需配置数据绑定。

Pattern 2: Data-Bound Menu from List

模式2：绑定列表数据源的菜单

Use MenuFieldSettings to bind a List<T> to your menu. Perfect for dynamic menus sourced from databases or APIs.

使用MenuFieldSettings将List<T>绑定到菜单。非常适合从数据库或API获取数据的动态菜单。

Pattern 3: Self-Referential Data

模式3：自引用数据

Map ParentId relationships in flat data to create hierarchical menus. Ideal for category/subcategory structures.

映射扁平数据中的ParentId关系以创建层级菜单。适用于分类/子分类结构。

Pattern 4: Event-Driven Menus

模式4：事件驱动菜单

Use MenuEvents to respond to user actions (Created, ItemSelected, OnOpen, OnClose). Essential for tracking user navigation.

使用MenuEvents响应用户操作（Created、ItemSelected、OnOpen、OnClose）。对于跟踪用户导航至关重要。

Pattern 5: Styled and Animated Menus

模式5：带样式与动画的菜单

Combine IconCss, MenuAnimationSettings, and Orientation for visually appealing, professional menus.

结合IconCss、MenuAnimationSettings和Orientation创建视觉吸引力强的专业菜单。

Key Properties

关键属性

Property	Purpose	Common Values
`TValue`	Generic type for menu items	`MenuItem` , custom classes
`Orientation`	Menu layout direction	`Horizontal` (default), `Vertical`
`ShowItemOnClick`	Open submenus on click instead of hover	`true` , `false` (default)
`MenuAnimationSettings`	Animation configuration	SlideDown, ZoomIn, FadeIn
`MenuFieldSettings`	Data binding field mappings	ItemId, Text, ParentId, Children
`MenuEvents`	Event handlers	Created, OnOpen, ItemSelected, etc.

属性	用途	常用值
`TValue`	菜单项的泛型类型	`MenuItem` 、自定义类
`Orientation`	菜单布局方向	`Horizontal` （默认）、 `Vertical`
`ShowItemOnClick`	设置通过点击而非悬停打开子菜单	`true` 、 `false` （默认）
`MenuAnimationSettings`	动画配置	SlideDown、ZoomIn、FadeIn
`MenuFieldSettings`	数据绑定字段映射	ItemId、Text、ParentId、Children
`MenuEvents`	事件处理器	Created、OnOpen、ItemSelected等

Next Steps

后续步骤

Setup: Start with the Getting Started reference for installation
Create: Choose a menu structure (hardcoded, data-bound, or hierarchical)
Enhance: Add events, styling, and animations as needed
Test: Verify menu navigation and interactions work correctly

配置：从快速入门文档开始完成安装
创建：选择菜单结构（硬编码、数据绑定或层级）
增强：根据需要添加事件、样式和动画
测试：验证菜单导航和交互是否正常工作