Responsive Navbar with Tailwind CSS: Step-by-Step Tutorial
Tags: webdev, tailwindcss, tutorial, beginners
Published: 2023-05-03 15:27:49

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**
{% youtube WHLZ2YEyNfs %}
 

## Pre Requieste:

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

1. The fundamentals of HTML & CSS
2. The fundamentals of JavaScript.
3. 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. 

```html
<!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. 

```html
<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. 

```jsx
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");
});
```

## Conclusion

In this article we created a responsive navbar with tailwind css. It’s a responsive navbar, you can use it with your web projects. 

Hope you liked the article if you want to read more articles like this follow me. 
You can find me here:

Twitter: [https://twitter.com/coderamrin](https://twitter.com/coderamrin)

YouTube: [https://www.youtube.com/@coderamrin](https://www.youtube.com/@coderamrin)

Thanks for reading. Untill next time Happy Coding.