Adding a New Menu Element/Component In SideBar Menu

You can follow the steps given below to add a new menu element in the sidebar of your template. This sidebar element is added by default in both your default and mini sidebar layout.

Step 1: Open src->assets->data->menuitems.json file. You need to add the new object as mentioned in the following code:

{
    "menu_title":"sidebar.newModules",
    "path":"javascript:void(0)",
    "icon":"error_outline",
    "category":"general",
    "isMenuOpen":false,
    "menu":"newModules",
    "fullPageMenu":false,
    "desc":true,
    "content":"",
    "child_routes":[
       {
          "menu_title":"sidebar.newModules1",
          "path":"/newModules",
          "child_routes":null,
          "icon":"policy",
          "fullPageMenu":false,
          "isMenuOpen":false,
          "third_child_routes":null,
          "exact":true
       }
    ]
 }

Step 2: Now open src->lang->locales->en_US.js file and add the new item under the export method.

export default {
    "sidebar.newModule" : "New Modules",
    "sidebar.dashboard" : "Dashboard",
    ....

The example is given above only adds the new menu item in the English locale, if you are using any different locale for your template then you need to specify the newly created category in that locale file also. You can find different locale files under the folder src->lang->locales .

After following the steps explained above, open the browser window and you can see your newly added menu item in the template. Refer the example image below:

Adding a New Menu Element/Component In Horizontal Layout

You can follow the steps given below to add a new menu element in the horizontal menu.

Step 1: Open src->assets->data->menuitems.json file. You need to add the new object as mentioned in the following code:

 {
    "menu_title":"sidebar.newModules",
    "path":"javascript:void(0)",
    "icon":"error_outline",
    "category":" newModules ",
    "isMenuOpen":false,
    "menu":"newModules",
    "fullPageMenu":false,
    "desc":true,
    "content":"",
    "child_routes":[
       {
          "menu_title":"sidebar.newModules1",
          "path":"/newModules",
          "child_routes":null,
          "icon":"policy",
          "fullPageMenu":false,
          "isMenuOpen":false,
          "third_child_routes":null,
          "exact":true
       }
    ]
 } 

Just change the category if you want to add new items in new dropdown otherwise you can add in general and other categories.

Step 2: Opensrc->components->HorizontalMenu->HorizontalMenu.js file & search for the setCategory() method and make the changes explained in the screenshot given below:

setCategory(){
         let category1 = this.state.navLinks.filter((item, i) => {
             return item.category === 'general';
         })
         ....
         ....
         let category5 = this.state.navLinks.filter((item, i) => {
             return item.category === 'newModules';
         })
         this.setState({
             general:category1,
             ....
             newModules: category5
         }) 
}

After that add new state in render() method

 render() {
       const { general, ...., newModules } = this.state;
       ....
} 

After that add new li structure in the return method

After following the steps explained above, open the browser window and you can see your newly added menu item in the template. Refer the example image below: