How to Create hamburger menu using Nextjs HTML CSS.
Updated at: 27 Feb 2024Deepak PainkraIn this article, we will create a hamburger menu using NextJS 14 with an app router and including HTML and CSS, so let's get into the tutorial.
Table of Contens
First, go ahead and create the next app by issuing this command,
Creating a Component
After that, create a components folder outside the app folder, which will be a root directory and now create Navbar.js inside the components folder.
Now, create a styles folder inside the app directory and create a file named Navbar.module.css
Writing JSX and Using the Ternary Operator
Now, let important useState and module CSS and write this thing at the top,
'use client'
import styles from '../app/styles/Navbar.module.css'
import Link from "next/link";
import { useState } from "react"Otherwise, it will give you an error because we are using a client component,
Now, let's create a function named Navbar inside the Navbar.js file, and a state will be false initially,
export default function Navbar({ children }) {
const [isOpen, setIsOpen] = useState(false);
const openMenu = () => setIsOpen(!isOpen);
}We have also created openMenu with an arrow function to handle click events,
If we talk about this logic, it says if openMenu is false, then the menu will be closed, and if it's true, then it will be active, which means open,
Full JSX Codes
In case you get confused, that's why we have written the codes in one place,
'use client'
import styles from '../app/styles/Navbar.module.css'
import Link from "next/link";
import { useState } from "react";
export default function Navbar({ children }) {
const [isOpen, setIsOpen] = useState(false);
const openMenu = () => setIsOpen(!isOpen);
return <>
<header className={styles.header}>
<nav className={styles.navbar}>
<Link href='/'>
<p className={styles.navlogo}>MyFinancetech</p>
</Link>
<ul className={isOpen === false ?
styles.navmenu : styles.navmenu + ' ' + styles.active}>
<li className={styles.navitem}>
<Link href='/' >
<p className={isOpen === false ?
styles.navlink : styles.navlink + ' ' + styles.active}
onClick={openMenu}>Home</p>
</Link>
</li>
<li className={styles.navitem}>
<Link href='/tech'>
<p className={isOpen === false ?
styles.navlink : styles.navlink + ' ' + styles.active}
onClick={openMenu}>Tech</p>
</Link>
</li>
<li className={styles.navitem}>
<Link href='/mobile' >
<p className={isOpen === false ?
styles.navlink : styles.navlink + ' ' + styles.active}
onClick={openMenu}>Mobile</p>
</Link>
</li>
<li className={styles.navitem}>
<Link href='/computer' >
<p className={isOpen === false ?
styles.navlink : styles.navlink + ' ' + styles.active}
onClick={openMenu}>Computer</p>
</Link>
</li>
<li className={styles.navitem}>
<Link href='/contact'>
<p className={isOpen === false ?
styles.navlink : styles.navlink + ' ' + styles.active}
onClick={openMenu}>Contact</p>
</Link>
</li>
</ul>
<button className={isOpen === false ?
styles.hamburger : styles.hamburger + ' ' + styles.active}
onClick={openMenu}
>
<span className={styles.bar}></span>
<span className={styles.bar}></span>
<span className={styles.bar}></span>
</button>
</nav>
</header>
{children}
</>
}Write the code step by step so you will get to know the logic.
Note:- It was the JavaScript part to handle the ON and OFF functions using the react ternary operator, and let's create a hamburger menu using CSS.
Creating Hamburger Menu
We have added the span tag to create a bar you could also add after and before property while using CSS,
.header{
border-bottom: 1px solid #E2E8F0;
}
.navbar {
position: relative;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 10vh;
position: fixed;
top: 0;
width: 100%;
}
.hamburger {
display: none;
}
.bar{
display: block;
width: 35px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #000;
}
.navmenu {
display: flex;
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;
}
.navlogo {
font-size: 2.1rem;
font-weight: 500;
color: rgb(56, 12, 12);
}
@media only screen and (max-width: 1100px) {
.navmenu {
position: fixed;
left: -100%;
top: 3rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}
.navbar {
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2 rem;
background-color: #ffffff;
height: 10vh;
position: fixed;
top: 0;
width: 100%;
}
.navlink{
color: black;
}
.navmenu.active {
left: 0;
}
.navitem {
margin: 1.3rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
-webkit-transform: translateY(8px) rotate(45deg);
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
}
I'm not getting into the CSS. Write down all the codes inside the Navbar.module.css, which I have shared code,
Now you are good to go, and your hamburger menu is ready for the website, and it's responsive as well.
Showing Navbar on Every Page
To show on every page, we need to import our Navbar from a component folder into the layout.js file,
import { Inter } from "next/font/google";
import "./styles/globals.css";
import Navbar from "@/components/Navbar"
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}><Navbar/>{children}</body>
</html>
);
}After importing the