Drift Angular
Search…
Customize Horizontal Menu
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. 1.
    Group
  2. 2.
    Mega
  3. 3.
    Collapse
  4. 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!
Last modified 2yr ago
Copy link