Customize menu items in React Menu component
29 Aug 202324 minutes to read
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.
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'));
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, setisUnique
totrue
.
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.
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'));
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.
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.
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'));
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.