Category / Section
How to customize the separator in JavaScript Menu control
2 mins read
This knowledge base explains the way to customize the separator in Menu. It can be achieved by adding the ‘e-custom’ class to the Separator in beforeItemRender event in Menu and we can override the styles for separator using ‘e-custom’ class. In the below code example, we have customized the color of separator in Menu.
HTML
<div class="menu-control">
<ul id="menu"></ul>
</div>
<style>
.e-menu-wrapper .e-menu.e-menu-parent .e-custom.e-menu-item.e-separator,
.e-menu-wrapper .e-ul.e-menu-parent .e-custom.e-menu-item.e-separator {
border-color: red;
}
</style>
TS
import { Menu, MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-navigations';
// Menu items definition
let menuItems: MenuItemModel[] = [
{
text: 'File',
items: [
{ text: 'Open' },
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
]
},
{
text: 'Edit',
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ separator: true },
{ text: 'Paste' }
]
},
{
text: 'View',
items: [
{ text: 'Full Screen' }
]
},
{ separator: true },
{
text: 'Tools'
},
{ separator: true },
{
text: 'Help'
}
];
// Menu initialization
new Menu({
items: menuItems,
//Triggers while rendering each menu item
beforeItemRender: (args: MenuEventArgs) => {
// To customize separator based by adding custom class.
if (args.item.separator)
args.element.classList.add('e-custom');
}
}, '#menu');
Sample Link: https://stackblitz.com/edit/mzgnhk-sauec5?file=index.html
The following output displays the result of customizing the separator in Menu.
