Nextjs Hamburger Menu - CSS only without Javascript

 

In this article, we will create a NextJS Hamburger menu without JavaScript and CSS only, supported for both the App and Pages router, so let's get into the tutorial.

 

Hamburger menu for both App & Page Router

In case you are using an app router for your project, then add this line so you do not get any errors,

And if you want to create a Hamburger menu while using JavaScripts,, then click the link

Click Here 

'use client'

If you are not using an app router, then remove this line, and it will work for a page router,

 

Creating a Components

First, create a components folder in the root directory of the project, which will be outside of the app, and create a file named Navbar.js inside the component folder,

import React from 'react'

const Navbar = () => {
  return (
    <div>Navbar</div>
  )
}

export default Navbar

For this project, we are using Inline CSS because we can't do it with module CSS, and we can do it with global CSS, but that will also be applied to Contact Form and to avoid conflict, we are using inline CSS.

 

Creating a Hamburger Menu

Now, we will give a container className to <div> tag, and we will add <input> and <label>, and let me share a code snippet,

<>
<div className="container">
        <nav className="navbar">

          <label>

            <input type="checkbox" id="navmenu" className="toggle" />
            <span className="bar"></span>
            <span className="bar"></span>
            <span className="bar"></span>



            <ul className="navmenu">
              <li className="navitem">Home</li>
              <li className="navitem">About</li>
              <li className="navitem">Trading</li>
              <li className="navitem">Contact</li>
              <li className="navitem">Privacy Policy</li>

            </ul>
          </label>


        </nav>

      </div>


    </>

The logic is if we add the same id to any className, then we can toggle our menu without using Javascript, and for the hamburger menu, we have added three <span> tags with the className bar, and you could also use the before and after CSS properties.

Now let's write inline CSS,

 

Method to Use Inline CSS in NextJS

To use inline CSS in NextJS, write <style jsx>{''}</style> inside the return tag, and this will only apply to the particular page only means only for this page.

<style jsx>
{''}
</style>

 

Now, you can write Inline CSS in your Nextjs project. I have shared a code snippet to avoid any errors. Here is the Navbar for the desktop and the nav menu for tablets and small screens.

<style jsx>
        {`

  .navbar {
    position: relative;
    z-index: 999;
    display: flex;    
    justify-content: space-between;
    align-items: center;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 10vh;
    position: fixed;
    top: 0;
    width: 100%;
   
  }
  

  .toggle{
    visibility: hidden;
  }

  
  
  .bar{
    display: block;
    display: none;
    width: 35px;
    height: 3px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #000;
  }
  
  .navmenu {
    display: flex;
    margin: 5px 50px;
    justify-content: space-between;
    align-items: center;
    list-style: none;
  }
  
  .navitem {
    margin-left: 3rem;
   
  }
  
  .navlink{
    font-size: 2rem;
    font-weight: 400;
    color: black;
    text-transform: uppercase;
    font-size:smaller
  }
  
  .navlink:hover{
    color: #482ff7;
  }

  @media only screen and (max-width: 1100px) {
    
    .bar{
      display: block;
      display: flex;
      width: 35px;
      height: 3px;
      margin: 5px 20px;
    }
    .toggle{
      visibility: hidden;
    }
    .navmenu {     
        position: fixed;
        visibility: hidden;
        padding: 4px 10px;
        height: 50vh;
        top: 3.5rem;
        color: blue;
        flex-direction: column;
        background-color: black;
        margin: 10px 1px;
        width: 90%;
        border-radius: 10px;
        text-align: center;
        transition: 0.1s;      
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .toggle{
      visibility: hidden;
    }

.toggle:checked ~ .navmenu{
      visibility: visible;
    }

.toggle:checked ~ .bar:nth-child(2) { transform: rotate(45deg);
  

  margin-left: 20px;

}

.toggle:checked ~ .bar:nth-child(3) {  transform: rotate(90deg);

  margin-left: 20px ;
 
 
}

.toggle:checked ~ .bar:nth-child(4) {  display:none;}

    

  }    

        `}
      </style>

 

So the logic says if the check box is unmarked, the mobile menu will hidden, and if it's marked, then it will be visible,

So, the input tag will check if it is marked or not, and if it is marked, it will transform to a different angle and set a third child display: none;,

There we go, and we have successfully created a Hamburger menu.