Icons and sub menu items in Angular Menu component

12 Sep 202521 minutes to read

This section demonstrates how to enhance the Angular Menu component with icons, navigation links, and multilevel nesting for improved usability and functionality.

Icons

Menu items can include an icon or image to visually represent an action. To place the icon on a menu item, set the iconCss property with the required CSS class names for font icons or sprite images. By default, the icon is positioned to the left of the menu item; custom positioning requires additional CSS styling. In the following sample, icons for the File and Edit menu items, and the Open, Save, Cut, Copy, and Paste submenu items, are added using the iconCss property.

Ensure proper CSS imports for iconCss to render correctly.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <ejs-menu #menu [items]='menuItems'></ejs-menu></div>`
})

export class AppComponent {
    //Menu items definition
    public menuItems: MenuItemModel[] = [
        {
            text: 'File',
            iconCss: 'em-icons e-file',
            items: [
                { text: 'Open', iconCss: 'em-icons e-open' },
                { text: 'Save', iconCss: 'e-icons e-save' },
                { separator: true },
                { text: 'Exit' }
            ]
        },
        {
            text: 'Edit',
            iconCss: 'em-icons e-edit',
            items: [
                { text: 'Cut', iconCss: 'em-icons e-cut' },
                { text: 'Copy', iconCss: 'em-icons e-copy' },
                { text: 'Paste', iconCss: 'em-icons e-paste' }
            ]
        },
        {
            text: 'View',
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' },
                { text: 'Full Screen' }
            ]
        },
        {
            text: 'Tools',
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ]
        },
        { text: 'Go' },
        { text: 'Help' }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Navigation in the Menu component directs users to another web page when a menu item is clicked. This is achieved by providing a link to the menu item using the url property, which accepts a string representing a valid URL and creates an anchor link that opens in the same tab by default. In the following sample, navigation URLs are added to submenu items using the url property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <ejs-menu #menu [items]='menuItems' (beforeItemRender)='beforeItemRender($event)'></ejs-menu></div>`
})

export class AppComponent {
    //Menu items definition
    public menuItems: MenuItemModel[] = [
        {
            text: 'Appliances',
            items: [
                { text: 'Washing Machine', url: 'https://www.google.com/search?q=washing+machine' },
                { text: 'Air Conditioners', url: 'https://www.google.com/search?q=air+conditioners' }
            ]
        },
        {
            text: 'Mobile',
            items: [
                { text: 'Headphones', url: 'https://www.google.com/search?q=headphones' },
                { text: 'Memory Cards', url: 'https://www.google.com/search?q=memory+cards' },
                { text: 'Power Banks', url: 'https://www.google.com/search?q=power+banks' }
            ]
        },
        {
            text: 'Entertainment',
            items: [
                { text: 'Televisions', url: 'https://www.google.com/search?q=televisions' },
                { text: 'Home Theatres', url: 'https://www.google.com/search?q=home+theatres' },
                { text: 'Gaming Laptops', url: 'https://www.google.com/search?q=gaming+laptops' }
            ]
        },
        { text: 'Fashion', url: 'https://www.google.com/search?q=fashion' },
        { text: 'Offers', url: 'https://www.google.com/search?q=offers' }
    ];

    public beforeItemRender(args: MenuEventArgs): void {
        if (args.item.url) {
            // To open url in blank page.
            args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multilevel nesting

Building on menu item configuration, the Menu component supports multilevel nesting, achieved by mapping the items property inside the parent menuItems. In the following sample, three-level nesting is provided.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <ejs-menu #menu [items]='menuItems'></ejs-menu></div>`
})

export class AppComponent {
    public menuItems: MenuItemModel[] = [
        {
            text: 'Fashion',
            items: [
                {
                    text: 'Men Fashion',
                    items: [
                        {
                            text: 'Personal Care',
                            items: [
                                { text: 'Trimmers' },
                                { text: 'Shavers' }
                            ]
                        },
                        {
                            text: 'Clothing',
                            items: [
                                { text: 'Shirts' },
                                { text: 'Jackets' },
                                { text: 'Track Suits' }
                            ]
                        },
                        { text: 'Footwear' }
                    ]
                },
                {
                    text: 'Women Fashion',
                    items: [
                        {
                            text: 'Clothing',
                            items: [
                                { text: 'Kurtas' },
                                { text: 'Salwars' },
                                { text: 'Sarees' }
                            ]
                        },
                        {
                            text: 'Jewellery',
                            items: [
                                { text: 'Nosepins' },
                                { text: 'Anklets' }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            text: 'Home & Living',
            items: [
                {
                    text: 'Washing Machine',
                    items: [
                        { text: 'Fully Automatic' },
                        { text: 'Semi Automatic' }
                    ]
                },
                {
                    text: 'Air Conditioners',
                    items: [
                        { text: 'Inverter ACs' },
                        { text: 'Split ACs' }
                    ]
                }
            ]
        },
        { text: 'Accessories' },
        { text: 'Sports' },
        { text: 'Gaming' }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can achieve multi level nesting with data source by mapping name of the child items to the children sub-property of fields property. Also, we can specify id property for menu items. For more information, refer to the data source binding section.
The following table represents the MenuItem properties and their descriptions.

Property Name Type Description
iconCss string Defines class/multiple classes separated by a space for the menu item that is used to include an icon. Menu items can include font icons and sprite images.
id string Specifies the ID for the menu item.
separator boolean Specifies separator between the menu items. Separator are either horizontal or vertical lines used to group menu items.
items MenuItemModel[] Specifies the submenu items as an array of MenuItemModel objects.
text string Specifies the text for the menu item.
url string Specifies the URL for the menu item that creates the anchor link to navigate to the provided URL.

See Also