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. Group

  2. Mega

  3. Collapse

  4. Item

Group

{
id: 'id of the menu',
title: 'Title of the menu',
translate: 'Translation Key',
type: 'group',
icon: 'icon of the menu',
children: [..submenu items..]
}

Mega

{
id: 'id of the menu',
title: 'Title of the menu',
translate: 'Translation Key',
type: 'mega',
icon: 'icon of the menu',
children: [item1, item4, item3, item4]
}

In Mega Menu support max four childers that must be collaple and item types.

Collapse

{
id: 'id of the menu',
title: 'Title of the menu',
translate: 'Translation Key',
type: 'collapse',
icon: 'icon of the menu',
children: [..submenu items..]
}

Item

{
id: 'id of the menu',
title: 'Title of the menu',
translate: 'Translation Key',
type: 'item',
icon: 'icon of the menu',
url: 'route url'
}