# App Bar

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

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

```
<AppBar position="static" color="default">
		<Toolbar>
			<IconButton color="inherit" aria-label="Menu">
			    <MenuIcon />
			</IconButton>
			<h5 className="mb-0">
			    Project Name
			</h5>
		</Toolbar>
</AppBar>
```

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

```
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
```

We have given you an example of adding a simple app bar on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbwK7kJS_VrYsXzmN64%2F-LbwLF6DWTEwOmSFOJie%2FSelection_024.png?alt=media\&token=43861eb9-8b29-4246-a9b2-2627011ee5bc)

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

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbhgRhwK95DAIz1y3mM%2F-LbhgbnHmq8iDsndqNFD%2FScreenshot%202019-04-05%20at%207.00.28%20PM.png?alt=media\&token=b3bd4552-70e1-430c-bd2a-529502dee467)
