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.
To complete this tutorial, you’ll need:
This tutorial was verified with Node v14.7.0, npm
v6.14.7, react
v16.13.1, and react-burger-menu
v2.7.1.
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 id
s 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.
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
.
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.
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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up
I am not able to install it whit
node init vite
, is there a way to use it? because my lapton cannot really work whitcreate-react-app
Hi, do this menu have the posibility to make items a sub-menu that hold other items inside?
How to add an image in the sidebar
This comment has been deleted