Search results

Customize menu items in JavaScript Menu control

Add or remove menu items

Menu items can be added or removed using the insertAfter, insertBefore and removeItems methods.

In the following example, the Europe menu items are added before the Oceania item, the Africa menu items are added after the Asia, and the South America and Mexico items are removed from menu.

Source
Preview
app.ts
index.html
styles.css
import { Menu, FieldSettingsModel } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Menu datasource
let data:  { [key: string]: Object }[] = [
    {
        continent: 'Asia',
        countries: [
            { country: 'China' },
            { country: 'India' },
            { country: 'Japan' }
        ]
    },
    {
        continent: 'North America',
        countries: [
            { country: 'Canada' },
            { country: 'Mexico' },
            { country: 'USA' }
        ]
    },
    {
        continent: 'South America',
        countries: [
            { country: 'Brazil' },
            { country: 'Colombia' },
            { country: 'Argentina' }
        ]
    },
    {
        continent: 'Oceania',
        countries: [
            { country: 'Australia' },
            { country: 'New Zealand' },
            { country: 'Samoa' },
        ]
    },
    { continent: 'Antarctica' }
];

//Menu fields definition
let menuFields: FieldSettingsModel = {
    text: ['continent', 'country'],
    children: ['countries']
};

//Initialize Menu component.
let menuObj: Menu = new Menu({ items: data, fields: menuFields }, '#menu');

let insertItem: object[] = [
    {
        continent: 'Europe',
        countries: [
            { country: 'Finland' },
            { country: 'Austria' }
        ]
    }
];

//Add items before to 'Oceania'
menuObj.insertBefore(insertItem, 'Oceania', false);

insertItem = [
    {
        continent: 'Africa',
        countries: [
            { country: 'Nigeria' }
        ]
    }
];

//Add items after to 'Asia'
menuObj.insertAfter(insertItem, 'Asia', false);

//Remove items
menuObj.removeItems(['South America', 'Mexico'], false);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <ul id="menu"></ul>
        </div>
    </div>
</body>

</html>
body {
    margin-top: 100px;
    text-align: center;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }
  
  #container {
    visibility: hidden;
  }

To process items with ID values, set isUnique to true.

Enable or disable menu items

You can enable and disable the menu items using the enableItems method in Menu. To enable menuItems, set the enable property in argument to true and vice-versa.

In the following example, the Directory header item, Conferences, and Music sub menu items are disabled.

Source
Preview
app.ts
index.html
styles.css
import { Menu, MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { Button } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Menu items definition
let menuItems: MenuItemModel[] = [
    {
        text: 'Events',
        items: [
            { text: 'Conferences' },
            { text: 'Music' },
            { text: 'Workshops' }
        ]
    },
    {
        text: 'Movies',
        items: [
            { text: 'Now Showing' },
            { text: 'Coming Soon' }
        ]
    },
    {
        text: 'Directory',
        items: [
            { text: 'Media Gallery' },
            { text: 'Newsletters' }
        ]
    },
    {
        text: 'Queries',
        items: [
            { text: 'Our Policy' },
            { text: 'Site Map' }
        ]
    },
    { text: 'Services' }
];

// Initialize Menu component.
let menuObj: Menu = new Menu({
    items: menuItems,
    beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
        //Handling sub menu items
        for (let i: number = 0; i  < args.items.length; i++) {
            if (disableItems.indexOf(args.items[i].text) > -1) {
                menuObj.enableItems([args.items[i].text], false, false);
            }
        }
    }
}, '#menu');

let disableItems: string[] = ['Conferences', 'Music', 'Directory'];

//Disable items
menuObj.enableItems(disableItems, false, false);

let buttonObj: Button = new Button();
buttonObj.appendTo('#enableAll');

buttonObj.element.onclick = (): void => {
    menuObj.enableItems(disableItems, true, false);
    disableItems = [];
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <button id='enableAll'>Enable all items</button>
            <div class="menu-section">
                <ul id="menu"></ul>
            </div>
        </div>
    </div>
</body>

</html>
.menu-section {
    margin-top: 100px;
    text-align: center;
}

To disable sub menu items, use the beforeOpen event.

Hide or show menu items

You can show or hide the menu items using the showItems and hideItems methods.

In the following example, the Movies header item, Workshops, and Music sub menu items are hidden in menu.

Source
Preview
app.ts
index.html
styles.css
import { Menu, MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { Button } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Menu items definition
let menuItems: MenuItemModel[] = [
    {
        text: 'Events',
        items: [
            { text: 'Conferences' },
            { text: 'Music' },
            { text: 'Workshops' }
        ]
    },
    {
        text: 'Movies',
        items: [
            { text: 'Now Showing' },
            { text: 'Coming Soon' }
        ]
    },
    {
        text: 'Directory',
        items: [
            { text: 'Media Gallery' },
            { text: 'Newsletters' }
        ]
    },
    {
        text: 'Queries',
        items: [
            { text: 'Our Policy' },
            { text: 'Site Map' }
        ]
    },
    { text: 'Services' }
];

// Initialize Menu component.
let menuObj: Menu = new Menu({
    items: menuItems,
    beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
        //Handling sub menu items
        for (let i: number = 0; i  < args.items.length; i++) {
            if (hiddenItems.indexOf(args.items[i].text) > -1) {
                menuObj.hideItems([args.items[i].text], false);
            }
        }
    },
}, '#menu');

let hiddenItems: string[] = ['Workshops', 'Music', 'Movies'];

//Hide items
menuObj.hideItems(hiddenItems, false);

let buttonObj: Button = new Button();
buttonObj.appendTo('#showAll');

buttonObj.element.onclick = (): void => {
    menuObj.showItems(hiddenItems, false);
    hiddenItems = [];
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <button id='showAll'>Show all items</button>
            <div class="menu-section">
                <ul id="menu"></ul>
            </div>
        </div>
    </div>
</body>

</html>
.menu-section {
    margin-top: 100px;
    text-align: center;
}

Using the beforeOpen event, you can hide the sub menu items as in the above example since the menu supports to hide items only for headers initially.