Customize Horizontal Menu

Add, Edit and Delete a 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

{
    name: 'Name of the mene',
    type: 'mega',
    icon: 'icon of the menu',
    children: [
        {
            name: 'Name of the column',
            type: 'column',
            icon: 'icon of the column',
            children: [item1, item4, item3, ...]
        },
        ...
    ]
}

Collapse

{
    name: 'Name of the menu',
    type: 'collapse',
    icon: 'icon of the menu',
    children: [..submenu items..]
}

Item

{
    name: 'Name of the menu',
    type: 'item',
    icon: 'icon of the menu',
    link: 'route url'
}

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.