---
description: >-
  Reactify provides you the ability to add new elements in the menu section of
  each layout. You can read the detailed documentation about adding the elements
  below.
---

# Adding Menu/Component In Different Layouts

## 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->components->Sidebar->NavLinks.js` file. You need to add the new category items in the given code:

```
// sidebar nav links
export default {
   ...
   category6: [
      {
         "menu_title": "sidebar.imageCropper",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/app/image-cropper",
         "child_routes": null
      }
      ...
   ],
   
   // Newly added category
   category7: [
      {
         "menu_title": "sidebar.newmodules",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/app/new-modules",
         "child_routes": null
      }
   ]
}
```

**Step 2:** Now open `src->lang->locales->en_US.js` file and add the newly created category under the `module.exports`:

```
module.exports = {
	"sidebar.newmodules" :"new modules", // Newly created category
	"sidebar.app": "App",
	...
```

The example given above only add 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` .

**Step 3:** Open `src->components->Sidebar->SidebarContent.js` file & search for the code `<div className="rct-sidebar-nav">` and add the new list component and make the changes explained in the screenshot given below:

![Newly Added List](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_CxKYT_ppbHItD4VZ7%2F-L_D8CmaDV-u7vDsUsbn%2FSelection_003.png?alt=media\&token=55b5f59a-3631-4e2e-b3b2-bd1b4f8b2e08)

**Step 4:** Go to `src->routes` folder and create a folder named `new-modules` inside it, then create a new file named `index.js` inside the folder. We have created a dummy sample for you by adding the given code in the file:

{% code title="index.js" %}
```
import React, { Component } from 'react';
import { Helmet } from "react-helmet";
// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// intl messages
import IntlMessages from 'Util/IntlMessages';

export default class NewList extends Component {
	render() {
		return (
			<div className="blank-wrapper">
				<Helmet>
					<title>name page</title>
					<meta name="description" content="Reactify Blank Page" />
				</Helmet>
				<PageTitleBar title={<IntlMessages id="sidebar.newmodules" />} match={this.props.match} />
			</div>
		);
	}
}
```
{% endcode %}

**Step 5.** Go to `src->components->AsyncComponent->AsyncComponent.js` file and create the component

```
 const AsyncNewModulesComponent = Loadable({
      loader: () => import("Routes/new-modules"),
      loading: () => <RctPageLoader />,
});

export {
     AsyncEcommerceDashboardComponent,
     AsyncSaasDashboardComponent,
     ...
     AsyncNewModulesComponent // export new component 
};
```

**Step 6:** Open the file `src->routes->_routerService.js` file and add the component like below:

```
export default [
	...
	// Added component
	{
		path: 'new-modules',
		component: NewList
	}
]
```

Now you have to import the given component like:

```
import NewList from 'Routes/new-modules';
```

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:

![Template with Newly Added Menu](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_CxKYT_ppbHItD4VZ7%2F-L_DAraT1LEMggo3Ng-2%2FSelection_004.png?alt=media\&token=7ca9a4eb-653d-4dd7-8ad3-6cd66e733684)

## 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 layout.

**Step 1:** Open `src->components->HorizontalMenu->NavLinks.js` file. You need to add the new category items in the given code:

```
// horizontal menu nav links
export default {
   ...
   category6: [
      {
         "menu_title": "sidebar.imageCropper",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/horizontal/image-cropper",
         "child_routes": null
      }
      ...
   ],
   
   // Newly added category
   category7: [
      {
         "menu_title": "sidebar.newmodules",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/horizontal/new-modules",
         "child_routes": null
      }
   ]
}
```

**Step 2:** You can follow the **Step 2 only** from the above described section [Adding a new menu element/component in Sidebar Menu](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts/adding-menu-in-different-layouts#adding-a-new-menu-element-component-in-sidebar-menu) as both can share the same procedure.

**Step 3:** Open `src->components->HorizontalMenu->HorizontalMenu.js` file & search for the class  `"horizontal-menu"` and add the new list component and make the changes explained in the screenshot given below:

![Newly Added List](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_SET8uMsdxVwLd1d59%2F-L_SJKgG9-Y9cNJgiSPt%2FSelection_006.png?alt=media\&token=30bd9991-f7bb-4b20-95a8-2da9fc993fe7)

**Step 4:** You can follow the **Step 4, 5 & 6** from the above described section [Adding a new menu element/component in Sidebar Menu](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts/adding-menu-in-different-layouts#adding-a-new-menu-element-component-in-sidebar-menu) as both can share the same procedure.

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:

![Template with Newly Added Menu](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_SET8uMsdxVwLd1d59%2F-L_SK2dbIYu9-qNdsIso%2FSelection_005.png?alt=media\&token=b77b5b58-8200-4673-b5c1-049c605d3bfd)

## Adding a New Menu Element/Component In Agency Layout

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

**Step 1:** Open `src->components->AgencyMenu->NavLinks.js` file. You need to add the new category items in the given code:

```
// agency horizontal menu nav links
export default {
   ...
   category6: [
      {
         "menu_title": "sidebar.imageCropper",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/image-cropper",
         "child_routes": null
      }
      ...
   ],
   
   // Newly added category
   category7: [
      {
         "menu_title": "sidebar.newmodules",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/new-modules",
         "child_routes": null
      }
   ]
}
```

**Step 2:** You can follow the **Step 2 only** from the above described section [Adding a new menu element/component in Sidebar Menu](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts/adding-menu-in-different-layouts#adding-a-new-menu-element-component-in-sidebar-menu) as both can share the same procedure.

**Step 3:** Open `src->components->AgencyMenu->AgencyMenu.js` file & search for the class  `"agency-menu"` and add the new list component and make the changes explained in the screenshot given below:

![Newly Added List](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_SR3_-t7d8irQr6f9_%2F-L_SSAQAr2MCF6X9oRUR%2FNew.png?alt=media\&token=9685e4d8-ccae-42bd-a0d0-e83961a069f8)

**Step 4:** You can follow the **Step 4, 5 & 6** from the above described section [Adding a new menu element/component in Sidebar Menu](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts/adding-menu-in-different-layouts#adding-a-new-menu-element-component-in-sidebar-menu) as both can share the same procedure.

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:

![Template with Newly Added Menu](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_SR3_-t7d8irQr6f9_%2F-L_SSL9AVF8iOc-OCb49%2FSelection_008.png?alt=media\&token=c0b6bd0b-d1c2-45be-9dfd-8ba5cea5b794)
