Customize Horizontal Menu

We are using Coremat Pro package in this template. Coremat navigation component (CmtNavigation) is being used in setting up the navigation menus.
For Horizontal menu we are using CmtHorizontal navigation component.
There are three types of Horizontal Menus
1.
Mega
2.
Collapse
3.
Item
Mega
1
{
2
    name: 'Name of the mene',
3
    type: 'mega',
4
    icon: 'icon of the menu',
5
    children: [
6
        {
7
            name: 'Name of the column',
8
            type: 'column',
9
            icon: 'icon of the column',
10
            children: [item1, item4, item3, ...]
11
        },
12
        ...
13
    ]
14
}
Copied!
Collapse
1
{
2
    name: 'Name of the menu',
3
    type: 'collapse',
4
    icon: 'icon of the menu',
5
    children: [..submenu items..]
6
}
Copied!
Item
1
{
2
    name: 'Name of the menu',
3
    type: 'item',
4
    icon: 'icon of the menu',
5
    link: 'route url'
6
}
Copied!
The horizontal menu bar is only available for “horizontal” layouts. To customize the horizontal menu, you would need to go to HeaderMenus.js file based on the type of horizontal layout you are using for your project. Following are three different horizontal type cases you can check:
For Horizontal Default layout :
src / @jumbo / components / AppLayout / HorizontalLayouts / HorizontalDefault / HeaderMenus.js 
For Horizontal Minimal layout :
src / @jumbo / components / AppLayout / HorizontalLayouts / HorizontalMinimal / HeaderMenus.js
For Horizontal Dark layout  and Horizontal Top Menu layout:
src / @jumbo / components / AppLayout / partials / Header/ HeaderNavigations / index.js
In above files we can change the JSON object navigationMenus to customize the menu items.

Settings - Previous

Template Settings

Next - Settings

Customize Vertical Menu

Last modified 10mo ago

Copy link

Contents

Mega

Collapse

Item