Responsive Navbar with Tailwind CSS: Step-by-Step Tutorial

Hello everyone today we are going to build a navbar with tailwind css. It’s a responsive animated navbar.
You can use it with your web projects.

so, let’s get started.

If you prefer video, you can watch it here

Pre Requieste:

To follow along you don’t have to be an expert at anything. All you have to know is the fundamentals.

The fundamentals of HTML & CSS
The fundamentals of JavaScript.
And some Tailwind CSS

Install Tailwind CSS

Before we start coding first we need to set up a Tailwind CSS project. You can set up a Tailwind CSS project by following the documentation.

Go ahead and set up a Tailwind CSS project.

Starter HTML

Here is the starter HTML code for the project. It has the output.css file linked and Font Awesome CDN linked.

And at the end we linked the Script.js file. Which will have the JavaScript we need for the toggler.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link href="./dist/output.css" rel="stylesheet" />
  </head>
  <body>

    <script src="./script.js"></script>
  </body>
</html>

Go ahead and copy it to your Index.html file.

The Navbar

The navbar is wrapped inside a header tag. And inside the header we got logo, navbar and the mobile toggler button.

We’ve used flexbox on the header to get everything on the same line. And justify-content to move them to the end.

On the mobile we used the right-[-50%] class to hide the navbar. And we used javascript to remove it and added the right-0 class when the user click on the toggler button.

<header class="header flex justify-between px-5 py-2 font-serif">
      <a href="/" class="logo text-4xl text-blue-500 font-bold">Studio</a>

      <nav
        class="nav absolute flex flex-col shadow-md w-[50%] h-full right-0 bg-white px-4 md:static md:h-auto md:w-auto md:flex-row md:shadow-none duration-500"
      >
        <button
          class="close-nav relative top-0 right-0 text-right text-3xl md:hidden"
        >
          <i class="fa-solid fa-xmark"></i>
        </button>

        <a
          href="#"
          class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400 text-blue-400 font-bold"
          >Home</a
        >
        <a href="#" class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400"
          >About</a
        >
        <a href="#" class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400"
          >Services</a
        >
        <a href="#" class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400"
          >Contact</a
        >
      </nav>

      <button class="show-nav text-3xl cursor-pointer">
        <i class="fa-solid fa-bars"></i>
      </button>
    </header>

The JavaScript

So, in our HTML we two Buttons, one is the ShowNav Other on is the CloseNav. Here we are getting the buttons using querySelector.

And after that we’ve added the event listener.

const showNav = document.querySelector(".show-nav");
const closeNav = document.querySelector(".close-nav");
const nav = document.querySelector(".nav");

closeNav.addEventListener("click", () => {
  nav.classList.remove("right-0");
  nav.classList.add("right-[-50%]");
});

showNav.addEventListener("click", () => {
  nav.classList.remove("right-[-50%]");
  nav.classList.add("right-0");
});