How to build a sidebar menu in react with react-burger-menu ?
Tags: react, javascript, html, css
Published: 2020-05-24 07:43:56

In this tutorial, we’ll build a simple sidebar for a website. Our first step will be to build our boilerplate webpage. To setup the app, I’m using create-react-app, but you can use anything you’re comfortable with.

My blog [click here](https://www.faisaljebali.com/)

First before start let us know what is react-burger-menu.

[react-burger-menu](https://github.com/negomi/react-burger-menu) is a library that allows us to easily create a sidebar for our React applications. It also comes with a multitude of effects and styles to customize the look and feel of our menu.

You can find the full code for this post on [CodeSandbox](https://codesandbox.io/s/sidebar-using-react-burger-menu-o4bws).

##Getting Started
First let’s install react-burger-menu
```
npm install react-burger-menu
```
Here is our root App component:
```javascript
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import SideBar from "./sidebar";

function App() {
  return (
    <div id="App">
      <SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />

      <div id="page-wrap">
        <h1>Click to show menu</h1>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
Now we need to start building our sidebar component. For this we’re going to create page sidebar.js

```javascript
import React from "react";
import { slide as Menu } from "react-burger-menu";

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

      <a className="menu-item" href="/about">
        About
      </a>

      <a className="menu-item" href="/services">
        Services
      </a>

      <a className="menu-item" href="/contact">
        Contact us
      </a>
    </Menu>
  );
};
```
Now let’s add a little bit of styling…

```css
html,
body {
  margin: 0;
}

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

#page-wrap {
  text-align: center;
  overflow: auto;
  top: 45%;
  position: relative;
}

.bm-item {
  display: inline-block;

  /* Our sidebar item styling */
  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;
  right: 36px;
  top: 36px;
}

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

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

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

/* General sidebar styles */
.bm-menu {
  background: #000;
  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;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}
```
You can find the full code for this post on [CodeSandbox](https://codesandbox.io/s/sidebar-using-react-burger-menu-o4bws).

My Blog [more posts](https://www.faisaljebali.com/)

Thanks for reading.