How to Customize menu items in React Menu Bar component

React

Search results

02 Feb 2023 / 5 minutes to read

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

index.jsx

index.html

index.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    let menuObj;
    // Menu data source
    let data = [
        {
            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 = {
        children: ['countries'],
        text: ['continent', 'country'],
    };
    function created() {
        let insertItem = [
            {
                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);
    }
    return (<MenuComponent ref={scope => menuObj = scope} items={data} fields={menuFields} created={created}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

import { enableRipple } from '@syncfusion/ej2-base';
import { FieldSettingsModel, MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

function App() {
    let menuObj: MenuComponent;

    // Menu data source
    let data: Array<{ [key: string]: any }> = [
        {
            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 = {
        children: ['countries'],
        text: ['continent', 'country'],
    };

    function created(): void {
        let insertItem: Array<{ [key: string]: any }> = [
            {
                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);
    }

    return (
        <MenuComponent ref={scope => menuObj = scope} items={data} fields={menuFields} created={created}/>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

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

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

index.jsx

index.html

index.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    let menuObj;
    // Menu items definition
    let menuItems = [
        {
            items: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ],
            text: 'Events'
        },
        {
            items: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ],
            text: 'Movies'
        },
        {
            items: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ],
            text: 'Directory'
        },
        {
            items: [
                { text: 'Our Policy' },
                { text: 'Site Map' }
            ],
            text: 'Queries'
        },
        { text: 'Services' }
    ];
    let disableItems = ['Conferences', 'Music', 'Directory'];
    function beforeOpen(args) {
        // Handling sub menu items
        for (const item of args.items) {
            if (disableItems.indexOf(item.text) > -1) {
                menuObj.enableItems([item.text], false, false);
            }
        }
    }
    function created() {
        // Disable items
        menuObj.enableItems(disableItems, false, false);
    }
    function btnClick() {
        // Enable items
        menuObj.enableItems(disableItems, true, false);
        disableItems = [];
    }
    return (<div className="control-section">
            <ButtonComponent id='enable' content='Enable all items' onClick={btnClick}/>
            <div className="menu-section">
                <MenuComponent ref={scope => menuObj = scope} items={menuItems} beforeOpen={beforeOpen} created={created}/>
            </div>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { BeforeOpenCloseMenuEventArgs, MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

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

    let disableItems: string[] = ['Conferences', 'Music', 'Directory'];
    function beforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
        // Handling sub menu items
        for (const item of args.items) {
            if (disableItems.indexOf(item.text) > -1) {
                menuObj.enableItems([item.text], false, false);
            }
        }
    }

    function created(): void {
        // Disable items
        menuObj.enableItems(disableItems, false, false);
    }

    function btnClick(): void {
        // Enable items
        menuObj.enableItems(disableItems, true, false);
        disableItems = [];
    }

    return (
        <div className="control-section">
            <ButtonComponent id='enable' content='Enable all items' onClick={btnClick}/>
            <div className="menu-section">
                <MenuComponent ref={scope => menuObj = scope} items={menuItems} beforeOpen={beforeOpen} created={created}/>
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

To disable sub menu items, use the beforeOpen event.

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

index.jsx

index.html

index.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    let menuObj;
    let menuItems = [
        {
            items: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ],
            text: 'Events'
        },
        {
            items: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ],
            text: 'Movies'
        },
        {
            items: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ],
            text: 'Directory'
        },
        {
            items: [
                { text: 'Our Policy' },
                { text: 'Site Map' }
            ],
            text: 'Queries'
        },
        { text: 'Services' }
    ];
    let hiddenItems = ['Workshops', 'Music', 'Movies'];
    function beforeOpen(args) {
        // Handling sub menu items
        for (const item of args.items) {
            if (hiddenItems.indexOf(item.text) > -1) {
                menuObj.hideItems([item.text], false);
            }
        }
    }
    function created() {
        // Disable items
        menuObj.hideItems(hiddenItems, false);
    }
    function btnClick() {
        // show items
        menuObj.showItems(hiddenItems, false);
        hiddenItems = [];
    }
    return (<div className="control-section">
            <ButtonComponent content='Show all items' onClick={btnClick}/>
            <div className="menu-section">
                <MenuComponent ref={scope => menuObj = scope} items={menuItems} beforeOpen={beforeOpen} created={created}/>
            </div>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { BeforeOpenCloseMenuEventArgs, MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
    let menuObj: MenuComponent;

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

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

    function beforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
        // Handling sub menu items
        for (const item of args.items) {
            if (hiddenItems.indexOf(item.text) > -1) {
                menuObj.hideItems([item.text], false);
            }
        }
    }

    function created(): void {
        // Disable items
        menuObj.hideItems(hiddenItems, false);
    }

    function btnClick(): void {
        // show items
        menuObj.showItems(hiddenItems, false);
        hiddenItems = [];
    }

    return (
        <div className="control-section">
            <ButtonComponent content='Show all items' onClick={btnClick}/>
            <div className="menu-section">
                <MenuComponent ref={scope => menuObj = scope} items={menuItems} beforeOpen={beforeOpen} created={created}/>
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

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.

Contents

Add or remove menu items
Enable or disable menu items
Hide or show menu items

Contents

Add or remove menu items
Enable or disable menu items
Hide or show menu items

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Customize menu items in React Menu Bar component

Add or remove menu items

Enable or disable menu items

Hide or show menu items