> 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/ui-components/divider.md).

# Divider

You can add the component on any page in the template. You need to follow the steps given below: 

**Step 1:** Please add the code given below in the page where you want to add the component.

```
<List className="p-0">
	  <ListItem button>
	  <ListItemIcon><i className="zmdi zmdi-inbox zmdi-hc-lg"></i></ListItemIcon>
	  <ListItemText primary="Inbox (2)" />
	  </ListItem>
	  <Divider />
	  <ListItem button>
	  <ListItemIcon><i className="zmdi zmdi-folder-star-alt zmdi-hc-lg"></i></ListItemIcon>
	  <ListItemText primary="Drafts" />
      </ListItem>
</List>	
```

**Step 2:** Now Import the component from its parent library.

```
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Divider from '@material-ui/core/Divider';
```

We have given you an example of adding a simple list divider on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbwY8BSY4Ahtf5JKcvK%2F-LbwYyq_oTjLIrVph8cp%2FSelection_035.png?alt=media\&token=1ed1678f-0326-452c-a72b-24e4a6730aa8)

You can check some other layouts of dividers below. For adding any of the below layout in the template, please check their relative code in the `src->routes->components->dividers->components` folder.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvInFAPHXX9gA1CZVL%2F-LbvKE2k2vHeNzlNxULX%2FScreenshot%202019-04-08%20at%2010.33.44%20AM.png?alt=media\&token=3375d1f2-d116-4aea-915e-df7ee73df1e6)