Building a Modern Responsive Navbar with Next.js and Tailwind CSS

A responsive and accessible navigation bar is one of the most important components in modern web applications. With Next.js for powerful React-based development and Tailwind CSS for utility-first styling, building a responsive navbar becomes both fast and efficient.

In this tutorial, we’ll walk through the steps to create a fully responsive navigation bar that works seamlessly across desktop and mobile devices.

Step 1: Setup Next.js with Tailwind CSS

npx create-next-app my-navbar-app
cd my-navbar-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js with your paths and import Tailwind into globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 2: Create Navbar Component

Inside components/Navbar.tsx:

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

export default function Navbar() {
  const [open, setOpen] = useState(false);

  return (
    <nav className="bg-white shadow-md fixed w-full z-10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <Link href="/" className="text-xl font-bold text-blue-600">
            MyApp
          </Link>

          <div className="hidden md:flex space-x-6">
            <Link href="/" className="hover:text-blue-600">Home</Link>
            <Link href="/about" className="hover:text-blue-600">About</Link>
            <Link href="/contact" className="hover:text-blue-600">Contact</Link>
          </div>

          <button
            onClick={() => setOpen(!open)}
            className="md:hidden text-gray-800 focus:outline-none"
          >
            ☰
          </button>
        </div>
      </div>

      {open && (
        <div className="md:hidden bg-white px-4 py-2 space-y-2">
          <Link href="/" className="block hover:text-blue-600">Home</Link>
          <Link href="/about" className="block hover:text-blue-600">About</Link>
          <Link href="/contact" className="block hover:text-blue-600">Contact</Link>
        </div>
      )}
    </nav>
  );
}

Step 3: Use Navbar in Layout

Edit app/layout.tsx:

import "./globals.css";
import Navbar from "@/components/Navbar";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <main className="pt-16">{children}</main>
      </body>
    </html>
  );
}

Step 4: Test Responsiveness

Run the dev server:

npm run dev

Resize the browser — the navbar should collapse into a hamburger menu on mobile and expand on larger screens.

Conclusion