Simple Sidebars with React-Pro-Sidebar and Material UI
Tags: materialui, react
Published: 2023-03-29 00:48:52

by [Joseph Umunna](https://blog.openreplay.com/authors/joseph-umunna)


Creating seamless navigation is crucial in web development to ensure a positive user experience.

React-Pro-Sidebar is a customizable and responsive React sidebar library with dropdown menus and unlimited nested submenus. It provides a set of components for creating high-level and customizable side navigation.

This tutorial will guide you on creating customizable and responsive sidebars with React Pro Sidebar library and Material-UI for pre-built icon components in React applications.


## What is React-Pro-Sidebar?

[React-Pro-Sidebar](https://www.npmjs.com/package/react-pro-sidebar) is a powerful and lightweight library that allows developers to create responsive, collapsible, customizable dropdown menus and unlimited nested submenus for web applications. It provides a set of pre-built components and APIs that can be used to manage the sidebar.

The `React-Pro-Sidebar` library provides a set of components for creating high-level and customizable side navigation. It features a smooth transition effect when interacted with. It also includes additional features such as a search bar, a notifications drawer, and the ability to toggle the sidebar from anywhere within your application.

While the `React-Pro-Sidebar` library is one among many for creating responsive sidebars, it is efficient and popular among developers. It is a popular choice for building navigation that needs to be concealed or revealed on demand.


## What is Material-UI?

[Material-UI](https://mui.com/material-ui/getting-started/overview/hw) is an open-source JavaScript library for building user interfaces that executes Google's Material Design. It provides a set of pre-built components, which we will use to create a consistent look and feel.

`Material-UI` provides a wide range of pre-built icons that can be easily integrated into a React application. The Material-UI Icon component can easily integrate these icons into the application.

Using icons on the sidebar to visually represent the menu items and help users quickly identify available options is vital. They can also help users understand the purpose or function of the menu items, making it easier for users to navigate the menu and find the option they're looking for.


## Why React-Pro-Sidebar?

`React-pro-sidebar`, like other libraries, has its own set of features and functionalities, some of which includes.


- It enables developers to efficiently design a responsive sidebar that adapts to various screen sizes.
- Seamless integration with other React libraries.
- It allows for customizable animations and transitions.
- It is a lightweight library and is easy to install and use.
- Offers documentation to guide you throughout the development process.

It is a simple tool for adding a sidebar to a React-based web application with little effort.


## Installation

To get started, we will install the `React-Pro-Sidebar` to get access to the library's API and `Material-UI` for access to menu icons.

### Installing and Setting up React-Pro-Sidebar

Once you have created your react application, use any of the commands below to install the `React-Pro-Sidebar` library.


```javascript
// NPM
$ npm install react-pro-sidebar
    
// YARN
$ yarn add react-pro-sidebar
```

After the installation is complete, we will import it into our component.


### Installing and setting up Material-UI

To install the `Material-UI` icons in the same react application, first install the package with any of the commands below.


```javascript
// NPM
$ npm install @mui/material @emotion/react @emotion/styled
    
// YARN
$ yarn add @mui/material @emotion/react @emotion/styled
```

Next, install the `Material-UI` icons with any of the commands below.

```javascript
// NPM
$ npm install @mui/icons-material
    
// YARN
$ yarn add @mui/icons-material
```

After the installation, we can import as many icons as we need into our component.

## Usage

To have complete access to the `React-Pro-Sidebar` library, we have to take care of a few things:


### Wrapping within a ProSidebarProvider Component

Here, we will import the `ProSidebarProvider` component from `react-pro-sidebar` as shown below.

```javascript
import { ProSidebarProvider } from "react-pro-sidebar";
```

We will wrap our entire application within a `ProSidebarProvider` component. This allows the sidebar to be accessible throughout the application and provides the necessary context for the other components in the library to function correctly, as shown below.

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ProSidebarProvider } from "react-pro-sidebar";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <div>
      <ProSidebarProvider>
        <App />
      </ProSidebarProvider>
    </div>
  </React.StrictMode>
);
```

    
### Importing React-Pro-Sidebar to your Component

Our App.js component will import the `Sidebar` component from the `React-Pro-Sidebar` package, as shown below.

```javascript
import { Sidebar } from "react-pro-sidebar";
```

We will use the `Sidebar` component to add the sidebar to our application.


## Getting Started

After successfully importing the `Sidebar` component and `Material-UI` icons into our `App.js` component, we will create a primary sidebar.

### Building a basic sidebar

Building a basic sidebar is quite simple. We will add the sidebar navigation in our layout component. Here, we will import a few components from the `React-Pro-Sidebar` library, as shown below.

```javascript
import { Sidebar, Menu, MenuItem } from "react-pro-sidebar";
```

In our `App.js` component, we will build our basic sidebar with the imported components and add some basic styling, as shown below.

```javascript
const App = () => {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <Sidebar className="app">
        <Menu>
          <MenuItem className="menu1">
            <h2>QUICKPAY</h2>
          </MenuItem>
          <MenuItem> Dashboard </MenuItem>
          <MenuItem> Invoices </MenuItem>
          <MenuItem> Charts </MenuItem>
          <MenuItem> Wallets </MenuItem>
          <MenuItem> Transactions </MenuItem>
          <MenuItem> Settings </MenuItem>
          <MenuItem> Logout </MenuItem>
        </Menu>
      </Sidebar>
      <h1>WELCOME TO QUICKPAY</h1>
    </div>
  );
};
export default App;
```
    
It will look like this:


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/X8AFDdA.png)


We will add basic styling to our sidebar to improve the UI.


```css
body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     height: 100vh;
     background: #ffffff;
     font-size: 24px;
}
.app {
     background: #a8d5e5;
}
h1 {
     color: #165a72;
     margin: 50px auto;
     font-size: 40px;
}
.menu1 {
     margin-bottom: 40px;
     margin-top: 20px;
}
h2 {
     color: #165a72;
}
```
    

After styling is applied, it will look like this.


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/wzb8MEd.png)



The `React-Pro-Sidebar` library also allows for implementing dropdown menus, submenus, and nested menus in your React application, as shown below.

```javascript
import { Sidebar, Menu, MenuItem, SubMenu } from "react-pro-sidebar";
const App = () => {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <Sidebar className="app">
        <Menu>
          <MenuItem className="menu1">
            <h2>QUICKPAY</h2>
          </MenuItem>
          <MenuItem> Dashboard </MenuItem>
          <MenuItem> Invoices </MenuItem>
          <SubMenu label="Charts">
            <MenuItem> Timeline Chart </MenuItem>
            <MenuItem> Bubble Chart </MenuItem>
          </SubMenu>
          <SubMenu label="Wallets">
            <MenuItem>Current Wallet</MenuItem>
            <MenuItem>Savings Wallet</MenuItem>
          </SubMenu>
          <MenuItem> Transactions </MenuItem>
          <SubMenu label="Settings">
            <MenuItem> Account </MenuItem>
            <MenuItem> Privacy </MenuItem>
            <MenuItem> Notifications </MenuItem>
          </SubMenu>
          <MenuItem> Logout </MenuItem>
        </Menu>
      </Sidebar>
      <h1>WELCOME TO QUICKPAY</h1>
    </div>
  );
};
export default App;
```
    

It will look like this.


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/o3NGTwS.gif)




### Importing icons with Material-UI

Earlier, we stated the use of icons in your sidebar. Icons visually represent the menu items and help users quickly identify the available options. We will import the icons from the [Material-UI icon](https://mui.com/material-ui/material-icons/) library.

```javascript
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import GridViewRoundedIcon from "@mui/icons-material/GridViewRounded";
import ReceiptRoundedIcon from "@mui/icons-material/ReceiptRounded";
import BarChartRoundedIcon from "@mui/icons-material/BarChartRounded";
import TimelineRoundedIcon from "@mui/icons-material/TimelineRounded";
import BubbleChartRoundedIcon from "@mui/icons-material/BubbleChartRounded";
import WalletRoundedIcon from "@mui/icons-material/WalletRounded";
import AccountBalanceRoundedIcon from "@mui/icons-material/AccountBalanceRounded";
import SavingsRoundedIcon from "@mui/icons-material/SavingsRounded";
import MonetizationOnRoundedIcon from "@mui/icons-material/MonetizationOnRounded";
import SettingsApplicationsRoundedIcon from "@mui/icons-material/SettingsApplicationsRounded";
import AccountCircleRoundedIcon from "@mui/icons-material/AccountCircleRounded";
import ShieldRoundedIcon from "@mui/icons-material/ShieldRounded";
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
```

As shown below, we will now integrate the icons we imported with the menu items.


```javascript
const App = () => {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <Sidebar className="app">
        <Menu>
          <MenuItem className="menu1" icon={<MenuRoundedIcon />}>
            <h2> QUICKPAY</h2>
          </MenuItem>
          <MenuItem icon={<GridViewRoundedIcon />}> Dashboard </MenuItem>
          <MenuItem icon={<ReceiptRoundedIcon />}> Invoices </MenuItem>
          <SubMenu label="Charts" icon={<BarChartRoundedIcon />}>
            <MenuItem icon={<TimelineRoundedIcon />}> Timeline Chart </MenuItem>
            <MenuItem icon={<BubbleChartRoundedIcon />}>Bubble Chart</MenuItem>
          </SubMenu>
          <SubMenu label="Wallets" icon={<WalletRoundedIcon />}>
            <MenuItem icon={<AccountBalanceRoundedIcon />}>
              Current Wallet
            </MenuItem>
            <MenuItem icon={<SavingsRoundedIcon />}>Savings Wallet</MenuItem>
          </SubMenu>
          <MenuItem icon={<MonetizationOnRoundedIcon />}>Transactions</MenuItem>
          <SubMenu label="Settings" icon={<SettingsApplicationsRoundedIcon />}>
            <MenuItem icon={<AccountCircleRoundedIcon />}> Account </MenuItem>
            <MenuItem icon={<ShieldRoundedIcon />}> Privacy </MenuItem>
            <MenuItem icon={<NotificationsRoundedIcon />}>
              Notifications
            </MenuItem>
          </SubMenu>
          <MenuItem icon={<LogoutRoundedIcon />}> Logout </MenuItem>
        </Menu>
      </Sidebar>
      <h1>WELCOME TO QUICKPAY</h1>
    </div>
  );
};
export default App;
```
    

After integrating the icons with our code, it will look like this.


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/YFc1DbF.png)


Looks excellent already, right? Now, we will look at how to integrate `React-Pro-Sidebar` with `React-Router`.



<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>






## Integrating with React-Router

The aim of having a sidebar is for easy navigation. We can easily make that happen by integrating our sidebar with [react-router](https://reactrouter.com/en/main). We can install and set up `react-router` with the command below.


```javascript
$ npm install react-router-dom@6
```

Similarly, as shown below, we will import the `BrowserRouter` component from `react-router-dom` in the `index.js` component.



```javascript
$ import { BrowserRouter } from "react-router-dom";
```

Next, in the `index.js` component, we will wrap the `App.js` component within the `BrowserRouter` component.

```javascript
<BrowserRouter>
  <App />
</BrowserRouter>;
```


Here, in the `App.js` component, we will import `Routes`, `Route`, and `Link` from `react-router-dom`. We will create a Home, Dashboard, and Transaction page to see `react-router` in action. 

```javascript
import { Routes, Route, Link } from "react-router-dom";
const Home = () => {
  return (
    <>
      <h1 className="header">WELCOME TO QUICKPAY</h1>
      <h3>Bank of the free</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </>
  );
};

const Dashboard = () => {
  return (
    <>
      <h1 className="header"> DASHBOARD PAGE</h1>
      <h3>Welcome User</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </>
  );
};

const Transactions = () => {
  return (
    <>
      <h1 className="header">KEEP TRACK OF YOUR SPENDINGS</h1>
      <h3>Seamless Transactions</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </>
  );
};
```

Now, we will create `Route` paths and use `Link` to link to the menu items.


```javascript
const App = () => {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <Sidebar className="app">
        <Menu>
          <MenuItem
            component={<Link to="/" className="link" />}
            className="menu1"
            icon={<MenuRoundedIcon />}
          >
            <h2>QUICKPAY</h2>
          </MenuItem>
          <MenuItem
            component={<Link to="dashboard" className="link" />}
            icon={<GridViewRoundedIcon />}
          >
            Dashboard
          </MenuItem>
          <MenuItem icon={<ReceiptRoundedIcon />}> Invoices </MenuItem>
          <SubMenu label="Charts" icon={<BarChartRoundedIcon />}>
            <MenuItem icon={<TimelineRoundedIcon />}> Timeline Chart </MenuItem>
            <MenuItem icon={<BubbleChartRoundedIcon />}>Bubble Chart</MenuItem>
          </SubMenu>
          <SubMenu label="Wallets" icon={<WalletRoundedIcon />}>
            <MenuItem icon={<AccountBalanceRoundedIcon />}>
              Current Wallet
            </MenuItem>
            <MenuItem icon={<SavingsRoundedIcon />}>Savings Wallet</MenuItem>
          </SubMenu>
          <MenuItem
            component={<Link to="transactions" className="link" />}
            icon={<MonetizationOnRoundedIcon />}
          >
            Transactions
          </MenuItem>
          <SubMenu label="Settings" icon={<SettingsApplicationsRoundedIcon />}>
            <MenuItem icon={<AccountCircleRoundedIcon />}> Account </MenuItem>
            <MenuItem icon={<ShieldRoundedIcon />}> Privacy </MenuItem>
            <MenuItem icon={<NotificationsRoundedIcon />}>
              Notifications
            </MenuItem>
          </SubMenu>
          <MenuItem icon={<LogoutRoundedIcon />}> Logout </MenuItem>
        </Menu>
      </Sidebar>
      <section>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="transactions" element={<Transactions />} />
        </Routes>
      </section>
    </div>
  );
};
export default App;
```

After linking the Home, Dashboard, and Transaction components with the menu items, it should look like this.


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/vj0U9Pn.gif)



Great! Our sidebar is now functional. With `react-router`, we can easily navigate from one menu item to another.


## Using useProSidebar hook

The `react-pro-sidebar` library has a `useProSidebar` hook that lets you access and manages the sidebar state. The `useProSidebar` hook API return some functions which can be used to update the sidebar state. Some of the functions include.

- `collapseSidebar`: A function that enables you to update the sidebar's collapsed state.
- `toggleSidebar`: A function that enables you to update the sidebar's toggled state.
- `collapsed`: boolean: Sidebar collapsed state.
- `toggled`: boolean: Sidebar toggled state.
- `broken`: boolean: Sidebar breakPoint state.
- `rtl`: boolean: Sidebar direction state.

This hook would need to be imported from the library to use it. To import the `useProSidebar` hook from the library, use the code below.

```javascript
import { Sidebar, Menu, MenuItem, SubMenu, useProSidebar } from "react-pro-sidebar";
```

Here, we will add a constant of the functions using the `useProSidebar` hook, coming from the `react-pro-sidebar` package, as shown below. 

```javascript
const { collapseSidebar, toggleSidebar, collapsed, toggled, broken, rtl } =
  useProSidebar();
```
You can now apply these functions to your sidebar using the `useProSidebar` hook.


## Collapsing the Sidebar

The `collapseSidebar` function comes from the `useProSidebar` hook. A collapsed sidebar is a sidebar triggered by a toggle button or icon. When the toggle button is clicked, the sidebar expands to reveal its content. When the toggle button is clicked again, the sidebar collapses and becomes hidden. We will use the `collapseSidebar` function to implement this, as shown below.



```javascript
const App = () => {
  const { collapseSidebar } = useProSidebar();
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <Sidebar className="app">
        <Menu>
          <MenuItem
            component={<Link to="/" className="link" />}
            className="menu1"
            icon={
              <MenuRoundedIcon
                onClick={() => {
                  collapseSidebar();
                }}
              />
            }
          >
            <h2>QUICKPAY</h2>
          </MenuItem>
        </Menu>
      </Sidebar>
    </div>
  );
};
export default App;
```

Here, we introduced the `onClick()` handler, which will call the `collapseSidebar` function. The sidebar collapses when the hamburger icon is clicked. It should look like this.


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/t1GJ3YC.gif)



Great! Our sidebar looks good. We can collapse the sidebar with the click of the icon.


## Revising the Sidebar Position

The sidebar is positioned on the left side of the screen by default. We can switch the position of the sidebar to the right side of the screen by changing the property of the `flex-direction` with CSS, as shown below.

```javascript
const App = () => {
  return (
    <div
      style={{ display: "flex", height: "100vh", flexDirection: "row-reverse" }}
    >
      <Sidebar className="app"></Sidebar>
    </div>
  );
};
export default App;
```

It should look like this:


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/A3WFXZt.png)



Now, the sidebar’s position has been switched to the right end of the screen with basic CSS styling.

## Using Right to left prop(rtl)

The `rtl` prop is a function that comes from the `useProSidebar` hook. By default, texts and other elements are arranged from left to right, the `rtl` prop negates that. The `rtl` stands for "right-to-left" and refers to how texts and other elements are arranged on a webpage or application, with the text and elements starting from the right side.

To implement this, we will set `rtl` as true.

```javascript
const App = () => {
  const { collapseSidebar, rtl } = useProSidebar();
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <Sidebar className="app" rtl={true}></Sidebar>
    </div>
  );
};
export default App;
```

Before executing the code, it looks like this:


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/qyOk9Zr.png)



After executing the code, the texts and elements in the sidebar follow the right-to-left direction, and it should look like this:


![-](https://blog.openreplay.com/images/simple-sidebars-with-react-pro-sidebar-and-material-ui/images/2s9TpZO.png)



Here, we can see that the left-to-right default direction was changed and now renders from right to left. We know this by the menu icons and the text elements.


## Conclusion

This tutorial discussed how to set up React Pro-Sidebar in our React application. We also discussed how to set up Material-UI icons and integrate the icons with the sidebar in our React app. React Pro-Sidebar has many advantages for building sidebars, such as great community, lightweight, documentation, customization properties, and consistency across the application.

Also, we discussed how to implement menu and submenu items in our sidebar. We also looked at how to integrate our sidebar with React-Router.

Furthermore, we looked at how to use the `useProSidebar` hook for extra functionalities like collapsing the sidebar and changing the texts and other elements in the sidebar to the right to left direction.

React Pro-Sidebar is a valuable tool for creating functional sidebars to aid easy navigation and ensure a positive user experience in a React application.



[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)