How To Build a Sidebar Component in React with react-burger-menu

Introduction

Sidebar menus are a form of navigation that appear on the side of a webpage. These menus provide access to different parts of the website while not interfering with the content on the page.

A button is frequently used to toggle sidebar menus open and closed. These buttons tend to have an icon of three horizontal lines to represent a menu. Because of the shape of this icon, it is commonly referred to as a “hamburger” menu icon. Two outer lines form the “bun,” and the middle line forms the “patty.”

react-burger-menu is a library that allows you to create a sidebar for your React applications. It also comes with a multitude of effects and styles to customize the look and feel of your menu.

In this tutorial, you will use react-burger-menu and build a sidebar for a notional restaurant website that serves salads, pizzas, and desserts.

Prerequisites

To complete this tutorial, you’ll need:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

This tutorial was verified with Node v14.7.0, npm v6.14.7, react v16.13.1, and react-burger-menu v2.7.1.

Step 1 — Setting Up the Project

Start with using create-react-app to generate a React App and then install dependencies:

npx create-react-app react-burger-menu-example

Change into the new project directory:

cd react-burger-menu-example

Next, open index.css:

nano src/index.css

Add the following styles:

* {
  box-sizing: border-box;
}

#page-wrap {
  padding-bottom: 10px;
  padding-top: 10px;
}

This code sets the box-sizing property to border-box to address issues with CSS box model calculations. This code also establishes some vertical padding to prevent collapsed margins.

Save the changes to index.css and then open App.js:

nano src/App.js

Remove the logo.svg and replace the content of the App component with a message from the example restaurant:

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

function App() {
  return (
    <div className="App" id="outer-container">
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

outer-container and page-wrap are important ids that will be referenced later by react-burger-menu.

After saving your changes, you can run the React application:

npm start 

Fix any errors or issues with your project and then open up localhost:3000 in a web browser:

Once you have a Cool Restaurant message properly displaying, you can start building the sidebar.

Step 2 — Adding the Sidebar Component

Your sidebar will require react-burger-menu and a React component.

First, install react-burger-menu:

npm install react-burger-menu@2.7.1

Now, create a new Sidebar.js file for a new Sidebar component:

nano src/Sidebar.js

Add the following code:

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="/salads">
        Salads
      </a>
      <a className="menu-item" href="/pizzas">
        Pizzas
      </a>
      <a className="menu-item" href="/desserts">
        Desserts
      </a>
    </Menu>
  );
};

This code will generate a Sidebar with menu links to Home, Salads, Pizzas, and Desserts.

This tutorial will not go into creating separate routes for these items. It will instead be focused on the functionality of the Sidebar itself.

react-burger-menu will require you to provide some styles, so create a Sidebar.css file:

nano src/Sidebar.css

Add the default styles provided by the react-burger-menu documentation:

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Color/shape of burger icon bars on hover*/
.bm-burger-bars-hover {
  background: #a90000;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
*/
.bm-menu-wrap {
  position: fixed;
  height: 100%;
}

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

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Individual item */
.bm-item {
  display: inline-block;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

For your tutorial, you will need to apply a link color and a hover color. Modify Sidebar.css to add these custom styles:

/* Individual item */
.bm-item {
  display: inline-block;

  color: #d1d1d1;
  margin-bottom: 10px;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s;
}

.bm-item:hover {
  color: #ffffff;
}

Now, add ./Sidebar.css to your Sidebar.js file:

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import './Sidebar.css';

// ...

Finally, to use the Sidebar in your application, you will need to revisit App.js:

nano src/App.js

Import the Sidebar component and add it to your App component:

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

function App() {
  return (
    <div className="App" id="outer-container">
      <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

At this point, you can run your application again:

npm start

Fix any errors or issues with your project. And visit localhost:3000 in a web browser:

Now, if you click the “hamburger” menu icon, your sidebar menu will appear with links to Home, Salads, Pizzas, and Desserts:

Next, you can explore some of the advanced customization available to react-burger-menu.

Step 3 — Adding Advanced Animations

Right now, your sidebar uses a slide animation. react-burger-menu comes with ten animation possibilities.

To try out another animation, open Sidebar.js:

nano src/Sidebar.js

And replace slide with a different animation:

// ...
import { bubble as Menu } from 'react-burger-menu';
// ...

This code will cause the menu to appear with a bubble effect.

// ...
import { elastic as Menu } from 'react-burger-menu';
// ...

This code will cause the menu to appear with an elastic effect.

The full list of animations can be found in the react-burger-menu docs.

The documentation also features advanced customizations for getting the sidebar menu to suit your application.

Conclusion

In this tutorial, you used react-burger-menu to create a sidebar menu. A sidebar menu is one common solution for navigating a website.

Alternative libraries for sidebar menus exist, and you may find one that is better suited for your application.

If you’d like to learn more about React, take a look at our How To Code in React.js series, or check out our React topic page for exercises and programming projects.