Navbar Component

Let's build a modern, responsive navbar using Next.js and Tailwind CSS.

Step 1: Create the Navbar Component

Create a new file at src/components/navbar.tsx and add the following code:

export function Navbar() {
  return (
    <nav className="w-full flex items-center justify-between px-6 py-3 border-b border-white bg-black text-white">
      <span className="font-bold text-lg">Logo</span>
      <div className="flex gap-6">
        <a href="#" className="hover:underline">Home</a>
        <a href="#" className="hover:underline">About</a>
        <a href="#" className="hover:underline">Contact</a>
      </div>
    </nav>
  );
}
tsx

Step 2: Use the Navbar in Your Layout

Import and add the Navbar to your src/app/layout.tsx so it appears on every page:

import { Navbar } from "@/components/navbar";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}
tsx

Live Example