How to create a react responsive hamburger menu

In this tutorial, we are going to show you the full steps to build a responive hamburger menu in a react app

Install react-burger-menu

First we need to install react-burger-menu which is a great library to help us create our hamburger menu more easily

To install it use the commands below

npm i react-burger-menu

yarn add react-burger-menu

Import related styles

Next, we need to place CSS classes related to styling our responsive hamburger menu in our main App.css file

Add these lines to your css file

.bm-burger-button {
	width: 36px;
	height: 30px;
	left: 36px;

	top: 36px;
}

.bm-burger-bars {
	background: #373a47;
}

.bm-burger-bars-hover {
	background: #a90000;
}

.bm-cross-button {
	height: 24px;
	width: 24px;
}

.bm-cross {
	background: #bdc3c7;
}

.bm-menu-wrap {
	position: fixed;
	height: 100%;
}

.bm-menu {
	background: #373a47;
	padding: 0.3rem 0.3rem 0;
	font-size: 1.15em;
}

.bm-morph-shape {
	fill: #373a47;
}

.bm-item-list {
	color: #b8b7ad;
	padding: 0.8em;
}

.bm-item {
	display: inline-block;
}

.bm-overlay {
	background: rgba(0, 0, 0, 0.3);
}
/* styling next link component so that will be a column list of links*/
.bm-item-list a {
	display: flex;
	flex-direction: column;
}

Create the hamburger icon react component

By default, react-burger-menu package do not include a hamburger menu, so let’s create our hamburger icon to place it in the navbar using react component

const HamburgerIcon = () => (
	<div>
		<svg
			className={styles.iconStyle}
			fill="none"
			strokeLinecap="round"
			strokeLinejoin="round"
			strokeWidth="2"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path d="M4 6h16M4 12h16M4 18h16"></path>
		</svg>
	</div>
);

So this react component will server as our hamburger icon in the navbar

Create your SPA

Now, let’s compose this and create our single page app which contains the responsive hamburger menu

Edit App.js

import {slide as Menu} from 'react-burger-menu';
import './index.css';
import styles from './styles.module.css';

const HamburgerMenu = () => (
	<div className={styles.hamburger}>
		<Menu
			customBurgerIcon={<HamburgerIcon />}
			width={'auto'}
			className={styles.hamburgerPosition}
		>
			<div>
				<div>Home</div>
				<div>About</div>
			</div>
		</Menu>
	</div>
);

const HamburgerIcon = () => (
	<div>
		<svg
			className={styles.iconStyle}
			fill="none"
			strokeLinecap="round"
			strokeLinejoin="round"
			strokeWidth="2"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path d="M4 6h16M4 12h16M4 18h16"></path>
		</svg>
	</div>
);

const Header = () => {
	return (
		<nav className={styles.headerNav}>
			<div className={styles.headerSubNav}>
				<HamburgerMenu />
			</div>
			<div></div>
		</nav>
	);
};

export default Header;

• We are rendering the hamburger menu only to mobiles so we get that responsive effect.

• The react-burger-menu takes in a custom burger icon which will be passed to prop customBurgerIcon

• We have added also some CSS so that our menu looks nice and our navbar will be shown fully in larger devices

styles.module.css

.hamburger {
	position: relative;
	padding: 0.5rem;
}

.hamburgerPosition {
	left: 0px;
	top: 3rem;
}

.headerNav {
	height: 3rem;
	background-color: black;
}

.headerSubNav {
	display: flex;
	@media (min-width: 768px) {
		display: none;
	}
}

.iconStyle {
	width: 2rem;
	height: 2rem;
	color: gray;
}

Test configuration

Now to test the configuration, run your dev server and hit localhost:3000 or whatever port you are using for dev server

When displayed on mobile we got this nice and beautiful hamburger menu:

Now when you are on full screen, the burger dissapear and the usual navbar is displayed

Conclusion

We have seen how to show toast error, success, info and warning message in react