How to Build a Responsive Navbar with Next.js

In this post, we will create a responsive navigation bar in Next.js that works on both desktop and mobile devices. The navbar will include a hamburger menu for mobile devices, navigation links, and login/sign-up buttons.

Step 1: Setup Next.js

If you haven’t already, create a new Next.js project by running:

npx create-next-app@latest

After the project is set up, navigate to your project folder:

cd your-project-name

Step 2: Creating the Navbar Component

Let’s start by creating a new component for the navbar. Inside the components folder, create a file named Navbar.jsx and begin by importing the necessary modules:

"use client";
import Link from "next/link";
import { useState } from "react";

In this code, we use the `useState` hook to manage the mobile menu toggle, and the `Link` component from Next.js for navigation.

Step 3: Adding the Toggle Functionality

We need to make the navbar responsive by adding a toggle button for mobile devices. Here’s how you can add the state for managing whether the menu is open or closed:

export default function Navbar() {
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => {
 setIsOpen(!isOpen);
 };

Here, we declare `isOpen` using `useState` and define `toggleMenu` to switch the menu’s visibility when the user clicks the hamburger icon.

Step 4: Structuring the Navbar

Now, let’s structure the navbar with brand/logo on the left and the links on the right. Here’s the code to create the brand logo and toggle button:

 return (
<nav className="bg-[#181147] text-white flex items-center justify-between p-4 sm:px-2">
<div className="text-xl font-bold text-center md:text-left"> <Link href="/">MyWebsite</Link>
</div>

<button className="md:hidden mr-4" onClick={toggleMenu}>
{isOpen ? (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
</svg>
) : (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7"/></svg>)}</button>

The svg icons switch between a hamburger and a close (X) icon when toggling the mobile menu.

Step 5: Creating the Navigation Links

Now, let’s add the actual links in our navbar. These links will change their layout based on screen size:

<ul className={`md:flex md:items-center md:space-x-4 absolute md:static bg-[#181147] w-full md:w-auto left-0 transition-all duration-300 ease-in-out ${isOpen ? 'top-16 opacity-100' : 'top-[-400px] opacity-0'} md:opacity-100`}>{navLinks.map((link) => (
     <li key={link.href} className="border-b md:border-none">
      <Link href={link.href} className="block p-2 hover:bg-gray-700" onClick={() => setIsOpen(false)}>
       {link.label}
      </Link>
     </li>
    ))}
   </ul>

This ul contains the navigation links and becomes visible in mobile mode when the hamburger icon is clicked.

Step 6: Adding Login and Sign-up Buttons

Finally, we will add login and sign-up buttons, which will be visible on both desktop and mobile devices, but styled differently for each.

Here’s the code to display these buttons:

<li className="md:hidden flex gap-5 p-4">
<Link href="#" className="w-20 h-10 flex justify-center items-center bg-[#4f46e5] hover:bg-[#6366f1] rounded-lg">Login</Link>
<Link href="#" className="w-20 h-10 flex justify-center items-center bg-[#6366f1] hover:bg-[#4f46e5] rounded-lg">
Sign up</Link></li>

<div className="hidden md:flex gap-4 items-center">
<Link href="#" className="w-20 h-10 flex justify-center items-center bg-[#4f46e5] hover:bg-[#6366f1] rounded-lg">Login</Link>
<Link href="#" className="w-20 h-10 flex justify-center items-center bg-[#6366f1] hover:bg-[#4f46e5] rounded-lg">Sign up</Link></div>

In mobile view, the buttons appear as part of the dropdown menu. In desktop view, they remain on the right side of the navbar.

For those interested in getting the full code, you can log in or sign up to receive a complete working version!

By following these steps, you can create a modern, responsive navbar for your Next.js projects, including functionality for mobile devices and desktop viewports.

If you have any questions or would like access to the full source code, don’t hesitate to reach out. Simply click the button below to receive the complete code. Thank you for read! ↓