For example, let’s say we want to add a new menu named Setting and
there could be sub menus of this menu like Change Password

Step -1 (Add new Menu to Side Navigation)

Open file src > containers > SideNav > SideNavContent.js

Add a new <li> inside ul having class nav-menu

Now, you can label this new li with name Settings

Here is how your new li element should look like now:


<li className="menu">
<Button className="void" href="javascript:void(0)">
<i className="zmdi zmdi-setting zmdi-hc-fw" />
<span className="nav-text">Settings</span>
</Button>
</li>


Add Sub-menu to Side Navigation

Similar to menu, add sub-menus as child of the Settings menu.

After adding the sub-menus, it will look like:


<ul className="sub-menu">
<li>
<NavLink className="prepend-icon" to="/settings/change-password">
<span className="nav-text">Change Password</span>
</NavLink>
</li>
.....
</ul>


Step -2 (Route the newly added menu)

Open file src > app > routes

Add a new directory name settings. We will keep all the related files
under this
directory

Under Settings dir add index.js file and a routes
directory

 

Step-I (Create a file named index.js)

 

Step – II (Create directory for app)

A directory under routes folder need to be created. Let’s say the name of the directory
is ChangePassword. This directory will be used to keep all the
scenes/views.

Now, go back to the index.js file you created in Step-I and copy the following code
there.


import React from 'react';
import {Route} from 'react-router-dom';

import ChangePassword from ‘./routes/ChangePassword/’

const Settings = ({match}) => (
<div>
<Route path={`${match.url}/change-password`} component={ ChangePassword } />
</div>
);

export default Settings;

You need to make sure that in line number 3 the directory name ChangePassword must
match.

 

Step -3 (Linking routes)

 

open file src > app > index.js

import component from settings


import Settings from './routes/settings/';

Add new route in main-app-container like this


<Route path={`${match.url}/settings`} component={ Settings } />

Cool, this all you need to do in order to add a new menu or sub-menus to the sidebar
navigations.