Icons and sub menu items in React Menu component
29 Aug 202324 minutes to read
Icons
The menu item contains an icon/image in it to provide a visual representation of an action. To place the icon on a menu item, set the iconCss
property with the required icon CSS. By default, the icon is positioned at the left of the menu item. In the following sample, the icons of File
and Edit
menu items and Open
, Save
, Cut
, Copy
,and Paste
sub menu items are added using the iconCss
property.
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() {
// Menu items definition
let menuItems = [
{
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: 'File'
},
{
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: 'Edit'
},
{
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' },
{ text: 'Full Screen' }
],
text: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Go' },
{ text: 'Help' }
];
return (<MenuComponent items={menuItems}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems: MenuItemModel[] = [
{
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: 'File'
},
{
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: 'Edit'
},
{
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' },
{ text: 'Full Screen' }
],
text: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Go' },
{ text: 'Help' }
];
return (
<MenuComponent items={menuItems}/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
Navigation
Navigation in Menu is used to navigate to the other web page when a menu item is clicked. It can be achieved by providing a link to the menu item using the url
property. In the following sample, the Navigation URL is added to sub menu items using the url property.
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() {
// Menu items definition
let menuItems = [
{
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: 'Appliances'
},
{
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: 'Mobile'
},
{
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: 'Entertainment'
},
{ text: 'Fashion', url: 'https://www.google.com/search?q=fashion' },
{ text: 'Offers', url: 'https://www.google.com/search?q=offers' }
];
function beforeItemRender(args) {
if (args.item.url) {
args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}
}
return (<MenuComponent items={menuItems} beforeItemRender={beforeItemRender}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems: MenuItemModel[] = [
{
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: 'Appliances'
},
{
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: 'Mobile'
},
{
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: 'Entertainment'
},
{ text: 'Fashion', url: 'https://www.google.com/search?q=fashion' },
{ text: 'Offers', url: 'https://www.google.com/search?q=offers' }
];
function beforeItemRender(args: MenuEventArgs): void {
if (args.item.url) {
args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}
}
return (
<MenuComponent items={menuItems} beforeItemRender={beforeItemRender}/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
Multilevel nesting
The Menu supports multiple level nesting, and it can be achieved by mapping the items
property inside the parent menuItems
. In the following sample, three-level nesting of menu has been provided.
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() {
// Menu items definition
let menuItems = [
{
items: [
{
items: [
{
items: [
{ text: 'Trimmers' },
{ text: 'Shavers' }
],
text: 'Personal Care'
},
{
items: [
{ text: 'Shirts' },
{ text: 'Jackets' },
{ text: 'Track Suits' }
],
text: 'Clothing'
},
{ text: 'Footwear' }
],
text: 'Men Fashion'
},
{
items: [
{
items: [
{ text: 'Kurtas' },
{ text: 'Salwars' },
{ text: 'Sarees' }
],
text: 'Clothing'
},
{
items: [
{ text: 'Nosepins' },
{ text: 'Anklets' }
],
text: 'Jewellery'
}
],
text: 'Women Fashion'
}
],
text: 'Fashion'
},
{
items: [
{
items: [
{ text: 'Fully Automatic' },
{ text: 'Semi Automatic' }
],
text: 'Washing Machine'
},
{
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' }
],
text: 'Air Conditioners'
}
],
text: 'Home & Living'
},
{ text: 'Accessories' },
{ text: 'Sports' },
{ text: 'Gaming' }
];
return (<MenuComponent items={menuItems}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems: MenuItemModel[] = [
{
items: [
{
items: [
{
items: [
{ text: 'Trimmers' },
{ text: 'Shavers' }
],
text: 'Personal Care'
},
{
items: [
{ text: 'Shirts' },
{ text: 'Jackets' },
{ text: 'Track Suits' }
],
text: 'Clothing'
},
{ text: 'Footwear' }
],
text: 'Men Fashion'
},
{
items: [
{
items: [
{ text: 'Kurtas' },
{ text: 'Salwars' },
{ text: 'Sarees' }
],
text: 'Clothing'
},
{
items: [
{ text: 'Nosepins' },
{ text: 'Anklets' }
],
text: 'Jewellery'
}
],
text: 'Women Fashion'
}
],
text: 'Fashion'
},
{
items: [
{
items: [
{ text: 'Fully Automatic' },
{ text: 'Semi Automatic' }
],
text: 'Washing Machine'
},
{
items: [
{ text: 'Inverter ACs' },
{ text: 'Split ACs' }
],
text: 'Air Conditioners'
}
],
text: 'Home & Living'
},
{ text: 'Accessories' },
{ text: 'Sports' },
{ text: 'Gaming' }
];
return (
<MenuComponent items={menuItems} />
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
You can achieve multi level nesting with data source by mapping
name
of the child items to thechildren
sub-property offields
property. Also, we can specifyid
property for menu items. For more information, refer to thedata source binding
section. To open sub menu items only on item click,showItemOnClick
should be set astrue
.
The below table represents the MenuItem properties and it’s description.
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 Item can include font icon and sprite image. | |
id | string | Specifies the id for 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 sub menu items that is the array of MenuItem model/ | |
text | string | Specifies text for menu item. | |
url | string | Specifies url for menu item that creates the anchor link to navigate to the url provided. |