Customize Horizontal Menu

Search…

Add, Edit and Delete a Horizontal Menu

The horizontal menu bar is only available for “listing” and “saas” layouts. To customize the horizontal menu for these two layouts you would need to go to:
src / app / layouts / {listing or saas} / navigation / header-menu.model.ts
In this model file, you can change the json object to customize the menu items.
There are four type in Horizontal Menu
1.Group
2.Mega
3.Collapse
4.Item
Group
1
{
2
    id: 'id of the menu',
3
    title: 'Title of the menu',
4
    translate: 'Translation Key',
5
    type: 'group',
6
    icon: 'icon of the menu',
7
    children: [..submenu items..]
8
}
Copied!
Mega
1
{
2
    id: 'id of the menu',
3
    title: 'Title of the menu',
4
    translate: 'Translation Key',
5
    type: 'mega',
6
    icon: 'icon of the menu',
7
    children: [item1, item4, item3, item4]
8
}
Copied!
In Mega Menu support max four childers that must be collaple and item types.
Collapse
1
{
2
    id: 'id of the menu',
3
    title: 'Title of the menu',
4
    translate: 'Translation Key',
5
    type: 'collapse',
6
    icon: 'icon of the menu',
7
    children: [..submenu items..]
8
}
Copied!
Item
1
{
2
    id: 'id of the menu',
3
    title: 'Title of the menu',
4
    translate: 'Translation Key',
5
    type: 'item',
6
    icon: 'icon of the menu',
7
    url: 'route url'
8
}
Copied!

Settings - Previous

Template Setting

Next - Settings

Customize Vertical Menu

Last modified 2yr ago

Copy link

Contents