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 -pConfigure 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 devResize the browser — the navbar should collapse into a hamburger menu on mobile and expand on larger screens.
Conclusion
With just a few lines of code, we’ve built a responsive, mobile-friendly navbar using Next.js + Tailwind CSS. This setup is scalable, accessible, and easy to customize for your project needs.