Implementing Menu Component

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.

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

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

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

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

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

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

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

Methods and Public 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

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)

API Reference

📄 Read: references/api-reference.md

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

Quick Start Example

Create a basic menu with three vertical items:

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

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

When you have custom data structures, map fields using the fields property:

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

Controller:

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

Pattern 2: Event Handling

Attach event handlers to respond to user interactions:

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

Pattern 3: Horizontal Menu with Icons

Create a horizontal menu with icon support:

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

Pattern 4: RTL and Accessibility

Enable accessibility features for different locales:

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

Key Properties Summary

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.