| name | syncfusion-javascript-menu |
| description | When building navigation hierarchies, implement Syncfusion Menu for multi-level nested items, data binding, animations, and event handling. Supports horizontal and vertical orientations, scrollable menus, accessibility, and real-time item management. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44","category":"Navigation Controls"} |
Implementing Syncfusion TypeScript Menu
The Syncfusion Menu is a graphical user interface component that serves as a navigation header for applications and websites. It provides support for multi-level nested menu items, data binding, animations, scrolling, and comprehensive event handling.
When to Use This Skill
Use this skill when you need to:
- Create navigation hierarchies: Build hierarchical menu structures with multiple levels of nested items
- Implement data-driven menus: Bind menu items from JSON data, services, or self-referential data sources
- Customize menu appearance: Configure animations, orientation, styling, and themes
- Handle menu interactions: Respond to user clicks, menu open/close events, and item selection
- Build responsive menus: Create horizontal/vertical menus with scrolling for large datasets
- Support accessibility: Implement keyboard navigation and screen reader support
- Manage menu state: Dynamically add, remove, enable, disable, show, or hide menu items
Control Overview
Key Features
- Data Binding: Supports hierarchical JSON data, self-referential data, and service-based data sources
- Template Support: Customize menu items with HTML templates and custom content
- Orientation: Display menus in horizontal or vertical direction
- Animations: Apply fade-in, zoom-in, and slide-down effects to sub-menus
- Scrolling: Enable scrolling for both horizontal and vertical menus
- Accessibility: Built-in keyboard navigation and ARIA support for screen readers
- Events: Comprehensive event system with select, beforeOpen, onOpen, beforeClose, onClose, and beforeItemRender
- Item Management: Add, remove, enable, disable, show, or hide items dynamically
- RTL Support: Right-to-left language support
- Hamburger Mode: Mobile-friendly responsive menu
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installation and package dependencies
- Development environment setup
- CSS imports and theme configuration
- Basic menu initialization with TypeScript
- HTML structure for menu rendering
- Running your first menu application
Menu Items and Hierarchy
📄 Read: references/menu-items-and-hierarchy.md
- Creating simple flat menu items
- Building multi-level nested hierarchies
- MenuItem properties overview
- Item text, IDs, URLs, and icons
- Separator items for grouping
- MenuItemModel interface reference
Data Binding and Field Mapping
📄 Read: references/data-binding.md
- Binding hierarchical JSON data
- Self-referential data source patterns
- Data service integration
- FieldSettings for custom field mapping
- HTML element binding
- Large dataset handling
Customization and Styling
📄 Read: references/customization-and-styling.md
- CSS class customization
- Horizontal versus vertical orientation
- Animation settings and effects
- Rounded corner styling
- Custom menu items with templates
- Right-to-left (RTL) support
- Theme customization
Working with Events
📄 Read: references/working-with-events.md
- Event types and lifecycle
- Select event handling
- beforeOpen and onOpen events
- beforeClose and onClose events
- beforeItemRender event
- Event argument properties
- Real-world event examples
Advanced Features and Item Management
📄 Read: references/advanced-features.md
- Adding and removing menu items
- Enabling and disabling items
- Hiding and showing items
- Scrollable menus (enableScrolling)
- Sub-menu positioning
- Hamburger mode for mobile
- Menu effects and transitions
- Performance optimization
Use Cases and Scenarios
📄 Read: references/use-cases-and-scenarios.md
- Scrollable menus with large datasets
- Accordion menu patterns
- Sidebar menu implementation
- Toolbar integration
- Context menu patterns
- Mnemonic UI implementation
- Menu with icons and titles
Accessibility and Best Practices
📄 Read: references/accessibility-and-best-practices.md
- Keyboard navigation support
- ARIA attributes and screen readers
- HTML sanitization for security
- Mobile responsiveness
- Performance optimization tips
- Common pitfalls and solutions
- Testing and validation
Complete API Reference
📄 Read: references/api-reference.md
- Menu properties with types and defaults
- MenuItem properties and options
- Menu methods and parameters
- Events with argument structures
- Animation effects and enums
- Field settings configuration
- Complete code examples for each API element
Quick Start Example
import { Menu, MenuItemModel } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
let menuItems: MenuItemModel[] = [
{
text: 'File',
items: [
{ text: 'Open' },
{ text: 'Save' },
{ text: 'Exit' }
]
},
{
text: 'Edit',
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
]
},
{
text: 'View',
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' }
]
},
{ text: 'Help' }
];
let menuObj: Menu = new Menu({ items: menuItems }, '#menu');
Common Patterns
Pattern 1: Responding to Item Selection
let menuObj: Menu = new Menu({
items: menuItems,
select: (args: MenuEventArgs) => {
console.log(`Selected: ${args.item.text}`);
}
}, '#menu');
Pattern 2: Dynamic Item Management
menuObj.insertAfter([{ text: 'Print' }], '#open');
menuObj.enableItems([0, 1]);
menuObj.disableItems([2]);
menuObj.showItems([0, 1]);
menuObj.hideItems([2]);
Pattern 3: Event Tracking
let menuObj: Menu = new Menu({
items: menuItems,
beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
console.log('Menu opening:', args.name);
},
onOpen: (args: OpenCloseMenuEventArgs) => {
console.log('Menu opened:', args.name);
},
beforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
console.log('Menu closing:', args.name);
}
}, '#menu');
Pattern 4: Data Binding from JSON
let hierarchicalData: MenuItemModel[] = [
{
text: 'Categories',
items: [
{ text: 'Electronics' },
{ text: 'Furniture' },
{ text: 'Accessories' }
]
}
];
let menuObj: Menu = new Menu({ items: hierarchicalData }, '#menu');
Key Properties and Methods
Essential Properties
| Property | Type | Purpose |
|---|
items | MenuItemModel[] | Array of menu items to display |
orientation | Orientation | Horizontal or Vertical layout |
animationSettings | MenuAnimationSettingsModel | Animation effects for sub-menus |
enableScrolling | boolean | Enable scrolling for large menus |
enableRtl | boolean | Right-to-left support |
cssClass | string | Custom CSS classes |
fields | FieldSettingsModel | Field mapping for data binding |
Essential Methods
| Method | Parameters | Purpose |
|---|
open() | element?: HTMLElement | Open menu or sub-menu |
close() | - | Close menu |
enableItems() | items: string[] | number[] | Enable specific items |
disableItems() | items: string[] | number[] | Disable specific items |
hideItems() | items: string[] | number[] | Hide specific items |
showItems() | items: string[] | number[] | Show hidden items |
insertAfter() | items: MenuItemModel[], target?: string | number | Insert items after target |
insertBefore() | items: MenuItemModel[], target?: string | number | Insert items before target |
removeItems() | items: string[] | number[] | Remove specific items |
Common Use Cases
- Application Navigation: Use for main application navigation bars
- Dropdown Menus: Context menus and dropdown navigation
- Hierarchical Navigation: Multi-level category or section navigation
- Responsive Menus: Mobile-friendly hamburger menus
- Custom Layouts: Template-based custom menu items
- Dynamic Updates: Real-time menu item management
- Accessibility: Keyboard-navigable menus
Need more details? Check the complete references above for implementation examples, advanced configurations, and best practices.