Navbar: Tailwind, Next.js, TypeScript

Prerequisites

Before we start, make sure you have the following installed on your machine:

Node.js and npm
A code editor (e.g., VS Code)

Additionally, you should be familiar with:

TypeScript basics
Next.js framework
Tailwind CSS fundamentals

Step 1: Set Up the Project

Initialize a Next.js Project:

 npx create-next-app@latest navbar-demo --typescript
 cd navbar-demo

Install Tailwind CSS:

Follow the official Tailwind CSS installation guide for Next.js:
```
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
```

Configure Tailwind CSS:

Update tailwind.config.js to include your content paths:

 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 };

Add Tailwind Directives to CSS:

Replace the content of styles/globals.css with:
```
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
```

Create a New Component:

Create a file named Navbar.tsx inside the components directory:
```
 mkdir components
 touch components/Navbar.tsx
```

Write the Navbar Code:

Here’s the TypeScript code for a responsive navbar:

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

 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);

   return (
     <nav className="bg-blue-600 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
             <h1 className="text-2xl font-bold">Brand</h1>
           </div>
           <div className="hidden md:block">
             <div className="ml-10 flex items-baseline space-x-4">
               <Link href="/">
                 <a className="hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
               </Link>
               <Link href="/about">
                 <a className="hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium">About</a>
               </Link>
               <Link href="/services">
                 <a className="hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium">Services</a>
               </Link>
               <Link href="/contact">
                 <a className="hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
               </Link>
             </div>
           </div>
           <div className="-mr-2 flex md:hidden">
             <button
               onClick={() => setIsOpen(!isOpen)}
               type="button"
               className="bg-blue-700 inline-flex items-center justify-center p-2 rounded-md text-white hover:bg-blue-800 focus:outline-none"
               aria-controls="mobile-menu"
               aria-expanded="false"
             >
               <span className="sr-only">Open main menu</span>
               {isOpen ? (
                 <svg
                   className="h-6 w-6"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                   aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={2}
                     d="M6 18L18 6M6 6l12 12"
                   />
                 </svg>
               ) : (
                 <svg
                   className="h-6 w-6"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                   aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={2}
                     d="M4 6h16M4 12h16m-7 6h7"
                   />
                 </svg>
               )}
             </button>
           </div>
         </div>
       </div>

       {isOpen && (
         <div className="md:hidden" id="mobile-menu">
           <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
             <Link href="/">
               <a className="hover:bg-blue-700 block px-3 py-2 rounded-md text-base font-medium">Home</a>
             </Link>
             <Link href="/about">
               <a className="hover:bg-blue-700 block px-3 py-2 rounded-md text-base font-medium">About</a>
             </Link>
             <Link href="/services">
               <a className="hover:bg-blue-700 block px-3 py-2 rounded-md text-base font-medium">Services</a>
             </Link>
             <Link href="/contact">
               <a className="hover:bg-blue-700 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
             </Link>
           </div>
         </div>
       )}
     </nav>
   );
 };

 export default Navbar;

Include the Navbar Component:

Open pages/_app.tsx and include the Navbar component:

 import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import Navbar from "../components/Navbar";

 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Navbar />
       <Component {...pageProps} />
     </>
   );
 }

 export default MyApp;

Run your project to see the navbar in action:

npm run dev

Visit http://localhost:3000 in your browser. You should see a responsive navbar that adapts seamlessly to different screen sizes.

Now lets see how it looks in desktop & mobile

Desktop View

Mobile View

Responsiveness: The navbar adapts to mobile and desktop views.
Accessibility: Includes ARIA attributes for better accessibility.
Customizable: Easily change colors, spacing, and links using Tailwind CSS.

Conclusion

With Tailwind CSS, Next.js, and TypeScript, creating a beautiful, responsive navbar is straightforward and efficient. This tutorial provides a foundation you can expand upon to meet your project's unique requirements. Happy coding!

Creating a Beautiful Navbar with Tailwind CSS, Next.js, and TypeScript: A Beginner's Guide

A well-designed navbar is a crucial part of any website's user interface. It helps users navigate your site effortlessly

Table of contents

Prerequisites

Step 1: Set Up the Project

Step 2: Create the Navbar Component

Step 3: Use the Navbar in Your App

Step 4: Test the Navbar

Desktop View

Mobile View

Features of the Navbar

Conclusion