Monday, 27 August, 2018 UTC
Summary
Every web application needs some kind of navigation. One of the most popular methods is to have a sidebar to the left of the page’s content. Today we’re going to create one in React using
react-burger-menu.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.
Using Redux? Try out redux-burger-menu.
Getting Started In this tutorial, we’ll build a simple sidebar for a restaurant’s 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.
Here is our root App component:
index.js
import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; import SideBar from "./sidebar"; function App() { return ( <div id="App"> <SideBar /> <div id="page-wrap"> <h1>Cool Restaurant 🍔🍕</h1> <h2>Check out our offerings in the sidebar!</h2> </div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); Now let’s add a little bit of styling…
styles.css
html, body { margin: 0; } #App { font-family: sans-serif; } #page-wrap { text-align: center; } Great! Now we have our basic webpage! Here’s what it looks like:
Now we need to start building our sidebar component. For this we’re going to open up a new file containing just the sidebar with a few links.
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="/burgers"> Burgers </a> <a className="menu-item" href="/pizzas"> Pizzas </a> <a className="menu-item" href="/desserts"> Desserts </a> </Menu> ); }; Now we need more styling to make the sidebar work properly. You can find the name of the classes that can be styled in the project’s README. We will also tweak a few styles to better fit our page.
styles.css
html, body { margin: 0; } #App { font-family: sans-serif; /* Give app full page to work with */ height: 100vh; } #page-wrap { text-align: center; /* Prevent sidebar from showing a scrollbar on page */ overflow: auto; } /* Individual item */ .bm-item { display: inline-block; /* Our sidebar item styling */ text-decoration: none; margin-bottom: 10px; color: #d1d1d1; transition: color 0.2s; } /* Change color on hover */ .bm-item:hover { color: white; } /* The rest copied directly from react-burger-menu docs */ /* 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; } /* 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: #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; } /* Styling of overlay */ .bm-overlay { background: rgba(0, 0, 0, 0.3); } Perfect! Now our sidebar looks and performs exactly as we’d like it to.
More Animations! react-burger-menu comes with 10 different animations possibilities. Right now our sidebar does a simple slide out animation. However, we can make it do much more.For the more advanced animations, however, we’ll need to pass a few props to our sidebar component: the ids of our page wrapper and our outer container elements.
index.js
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>Cool Restaurant 🍔🍕</h1> <h2>Check out our offerings in the sidebar!</h2> </div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); Now we actually have to pass those props from our
SideBar component to react-burger-menu.sidebar.js
import React from "react"; import { slide as Menu } from "react-burger-menu"; export default props => { return ( // Pass on our props <Menu {...props}> <a className="menu-item" href="/"> Home </a> <a className="menu-item" href="/burgers"> Burgers </a> <a className="menu-item" href="/pizzas"> Pizzas </a> <a className="menu-item" href="/desserts"> Desserts </a> </Menu> ); }; Ta-da! 🎉
To try out our different animations, simply change the imported
slide at the top of our sidebar.js file to any of the other animation, such as bubble. The full list of animations can be found in the react-burger-menu docs.You can find the full code for this post on CodeSandbox.