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");
});
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
YouTube: https://www.youtube.com/@coderamrin
Thanks for reading. Untill next time Happy Coding.
Top comments (0)