How to create a responsive hamburger menu in Next.js [complete guide]

Burger menu is very helpful to create a good user experience, especially in mobile devices which let users browse the website more easily.

In this tutorial, we are going to explain step by step how to add a hamburger menu and display it only in mobile in a React based app like Next.js and using react-burger-menu and tailwindcss

install react-burger-menu

First, we need to install react-burger-menu

to do it use:

## npm
npm i react-burger-menu
## yarn

yarn add react-burger-menu

Hamburger example

Next, we need to create a CSS file to create the visual styles for the hamburger

Create the CSS file

Create a file under styles directory

styles/burger.css

.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;
  }

This CSS file is modified and the original CSS file could be found in this link

Update the _app.js

We need to update the /_app.js so that our burger.css that we have created earlier will be taking into account pages/_app.js

import '../styles/burger.css'


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Create the Hamburger SVG component

By default, react-burger-menu does not include a hambuger icon, you can either use an image or an svg format so it will look like the hamburger

Below our hamburger component using SVG

const HamburgerIcon = () => (<div className='p-1/2'><svg className="w-8 h-8 text-gray-500" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"></path></svg></div>)

Create the Hamburger component

Next, we will create our hamburger component so it could be used easily on other pages.

We will customize the react-burger-menu so that to have:

• Custom Burger icon using the previous svg icon, to add it we will fill in the customBurgerIcon prop
• The prop width will be adjusted automatically to links length
• Custom className so the menu will stick to the left and 12 pixels from top.

The final component will look like

components/hamburger.js

import Link from 'next/link'
import { slide as Menu } from 'react-burger-menu'
const HamburgerMenu = () => (<div className='relative p-2'>
    <Menu customBurgerIcon={<HamburgerIcon />} width={'auto'} className='left-0 top-12' >
        <Links />
    </Menu>
</div>)

const HamburgerIcon = () => (<div className='p-1/2'><svg className="w-8 h-8 text-gray-500" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"></path></svg></div>)

export const Links = () => (<>
    <Link href="/"><a className='font-bold p-4'>Home</a></Link>
    <Link href="/about"><a className='font-bold p-4'>About</a></Link>
</>)

export default HamburgerMenu

hamburger page example

Now, let's build our page and display the menu accordingly

The menu will be hidden in mobile viewport

We are using tailwind to apply CSS which is an easy way to write inline CSS, to learn more you can check my article in this link

pages/test.js

import HamburgerMenu, { Links } from '../components/hamburger.js'
export default function Test() {
    return (
        <div className='max-w-full h-12 flex justify-start items-center bg-black mb-4 text-white rounded-md '>
            <div className='flex md:hidden'><HamburgerMenu /></div>
            <div className='hidden md:flex'>
                <Links />
            </div>
        </div>

    )
}

Test the components

Now, let's run the page with hitting localhost:3000/test

the results will look like in full desktop

Results in mobile viewport

This same code is implemented on this website that you can test as well

Conclusion

In this tutorial, we have presented how to create a responsive hamburger menu and display it only in mobile.

If you are interested about making it in react, I recommend to check the full tutorial in this link to learn how to build the responsive react burger menu

We have also provided an SVG form to use for hamburger, and style them using tailwind and media queries so that it will show in mobile.

To learn more about media queries you can check my article in this link