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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
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