React Sidebar: The Complete Guide

In web applications, sidebars in web pages are among the most powerful and used components that exist on a page due to their navigational functionality. Therefore, sidebars are essential to the web page, even if the level of attention does not come first. This is because they can help the users navigate in different ways, such as content that they may be interested in instead of the logical navigational menu.

React sidebar

To create a sidebar in React, use the react-burger-menu or create a sidebar component using the Material UI library. This library will help us to build a sidebar menu component in React.js. The Sidebar is an integral component in React-powered web applications. We are not using Redux so we will build with plain React.js.

First, we install React.js and then install the third-party GitHub library called react-burger-menu.

Step 1: Install React.js

Type the following command to install React.js.

npx create-react-app sidebar

Go inside the folder and open it in the VSCode editor.

cd sidebar
code .

Now, install the react-burger-menu library using the following command.

npm install react-burger-menu --save

# or

yarn add react-burger-menu

Step 2: Create a Sidebar Menu

Inside the src folder, create one file called sidebar.js. In this sidebar component, we can add a list of items displayed inside the sidebar. Here, we will make use of react-burger-menu as well.

So, write the following code inside the sidebar.js file.

// sidebar.js

import React from 'react';
import { slide as Menu } from 'react-burger-menu';

export default props => {
  return (
    <Menu>
      <a className="menu-item" href="/">
        Home
      </a>

      <a className="menu-item" href="/laravel">
        Laravel
      </a>

      <a className="menu-item" href="/angular">
        Angular
      </a>

      <a className="menu-item" href="/react">
        React
      </a>

      <a className="menu-item" href="/vue">
        Vue
      </a>

      <a className="menu-item" href="/node">
        Node
      </a>
    </Menu>
  );
};

So, here we have imported the slide component from the react-burger menu. 

Step 3: Import the sidebar.js file inside an App.js file.

Write the following code inside an App.js file.

// App.js

import React from 'react';
import SideBar from './sidebar';

import './App.css';

export default function App() {
  return (
    <div id="App">
      <SideBar />
      <div id="page-wrap">
        <h1>AppDividend</h1>
        <h2>Check out our tutorials the side menubar</h2>
      </div>
    </div>
  );
}

Now, finally, add the CSS code inside the App.css file.

html,
body {
  margin: 0;
}

#App {
  font-family: sans-serif;
  height: 100vh;
}

#page-wrap {
  text-align: center;
  overflow: auto;
}

.bm-item {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 10px;
  color: #d1d1d1;
  transition: color 0.2s;
}

.bm-item:hover {
  color: white;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

.bm-burger-bars {
  background: #373a47;
}

.bm-cross-button {
  height: 24px;
  width: 24px;
}

.bm-cross {
  background: #bdc3c7;
}

.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

.bm-morph-shape {
  fill: #373a47;
}

.bm-item-list {
  color: #b8b7ad;
}

.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

After saving the file, go to the terminal and start the React development server.

npm start

So at this URL: http://localhost:3000/. You can see that our React.js project is up and running.

To try out our different animations, merely change the imported slide at the top of our sidebar.js file to any other animations, such as bubble. To use a different animation, you can substitute slides with any following.

1. slide
2. stack
3. elastic
4. bubble
5. push
6. pushRotate
7. scaleDown
8. scaleRotate
9. fallDown
10. reveal

Properties

Some animations require certain other elements to be on your page.

Page Wrapper

An element wrapping the rest of the content on your page.

<Menu pageWrapId={ "page-wrap" } />
<main id="page-wrap">
  .
  .
  .
</main>

Outer container

An element containing everything, including the menu component.

<div id="outer-container">
  <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } />
  <main id="page-wrap">
    .
    .
    .
  </main>
</div>

Create React Sidebar Component using Material UI

Let’s create a simple sidebar component in React using Material UI.

First, install the following material package using Yarn or NPM.

yarn  add @material-ui/core @material-ui/icons

# or

npm install @material-ui/core @material-ui/icons

Once that is installed, we need to think of it as a base structure in the user interface that our sidebar will be built upon.

A solution is to use an unordered list (<ul>) element that renders the list items (<li>).

We will import List and ListItem from @material-ui/core library since the List component is essentially the ul element, and the ListItem component is essentially the li.

Let’s start off hardcoding the couple of items in the sidebar to visualize how this might look like to boost our confidence. Sometimes a little extra confidence can help improve our productivity:

Now, create a folder inside the src folder called components.

The next step is to write the following code inside the src >> components >> Sidebar.js file.

Write the following code inside that file.

// Sidebar.js

import React from 'react'

function Sidebar() {
  return null
}

export default Sidebar

Now, import the component inside the src >> App.js file.

// App.js

import React from 'react';
import './App.css';

import Sidebar from './components/Sidebar';

 function App() {
    return (
      <div>
        <Sidebar items={items}/>
      </div>
    );
  }

export default App;

Now, we add the items which we will display in the sidebar. Let’s take five elements.

Write the following code inside the App.js file.

// App.js

import React from 'react';
import './App.css';

import Sidebar from './components/Sidebar';

const items = [
  { name: 'home', label: 'Home' },
  { name: 'sales', label: 'Sales' },
  { name: 'orders', label: 'Orders' },
  { name: 'billing', label: 'Billing' },
  { name: 'settings', label: 'Settings' }]

function App() {
  return (
    <div class="sidebar">
      <Sidebar items={items} />
    </div>
  );
}

export default App;

We will also expect an items prop with an array of objects representing each item in the sidebar menu. But, again, we want to keep the functionality as simple as possible, or we could quickly overcomplicate the component.

You might have noticed that our sidebar is just too dang big! *Side*bars usually take up one side of the screen. So what we are going to do is shrink its width to a suitable size. We will go ahead and put a max-width of 200px on it. So we’re going to create a div element that wraps our List component.

We create another div element instead of directly applying the styles on the List component because we don’t want to make List responsible for the width size.

This way, in the future, we can choose to abstract the List into a reusable sidebar component where it can adapt to any size depending on the size of the parent element.

So, add one css class inside the App.css file.

.sidebar {
  max-width: 240px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

Material-UI uses its CSS styling mechanism using the CSS-in-JS approach. But we will stick to regular CSS in this article to keep things unnecessarily complicated.

Write the Sidebar.js component.

Okay, now our final step is to add the following code inside the Sidebar.js file.

// Sidebar.js

import React from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'

function Sidebar({ items }) {
  return (
    <div className="sidebar">
      <List disablePadding dense>
        {items.map(({ label, name, ...rest }) => (
          <ListItem key={name} button {...rest}>
            <ListItemText>{label}</ListItemText>
          </ListItem>
        ))}
      </List>
    </div>
  )
}

export default Sidebar

Save the file and see the output. 

That’s it for the sidebar component in React.

Thanks for taking it.