> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/reactify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts/adding-menu-in-different-layouts.md).

# 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](/files/-L_D8CmaDV-u7vDsUsbn)

**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](/files/-L_DAraT1LEMggo3Ng-2)

## 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](/files/-L_SJKgG9-Y9cNJgiSPt)

**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](/files/-L_SK2dbIYu9-qNdsIso)

## 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](/files/-L_SSAQAr2MCF6X9oRUR)

**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](/files/-L_SSL9AVF8iOc-OCb49)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts/adding-menu-in-different-layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.