Hi, Maybe you guys know that nowadays I’m learning tailwind css and today I built a few navbar components. I’m not just learning Tailwind although I’m building components every day and enjoying them. I thought why not create components that others also can use if they are needed in some cases? I thought that let’s share the journey and keep things smooth.
In this way, maybe my components can help some dev in their development period. I’ll be very happy if someone will be using a component built by me. I was building navbar i decided to create navbar components so that i can practice more and also can publish on my blog.
Navbar Components
Here are the components that i have built.
First Navbar Components
Here’s the a little wider and dark navbar component with a blue background.
<div class="container flex flex-row justify-center">
<nav class="flex justify-center my-5 px-3 py-3 bg-gray-700 rounded-3xl">
<ul class="flex gap-3 py-1 px-5">
<li class="">
<a href="#" onclick="handleClick(event)"
class="gap-2 items-center text-white flex transition-all ease-in-out py-3 px-3 rounded-3xl hover:bg-blue-600 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span class="px-2">Home</span>
</a>
</li>
<li>
<a href="#" onclick="handleClick(event)"
class="text-white gap-2 items-center flex transition-all ease-in-out py-3 px-3 rounded-3xl hover:bg-blue-600 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
</svg>
<span class="px-2">Blogs</span>
</a>
</li>
<li>
<a href="#" onclick="handleClick(event)"
class="text-white flex transition-all ease-in-out py-3 px-3 rounded-3xl hover:bg-blue-600 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
</svg>
<span class="px-2">Services</span>
</a>
</li>
<li>
<a href="#" onclick="handleClick(event)"
class="text-white flex transition-all ease-in-out py-3 px-3 rounded-3xl hover:bg-blue-600 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.25 9.75v-4.5m0 4.5h4.5m-4.5 0l6-6m-3 18c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 014.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 00-.38 1.21 12.035 12.035 0 007.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 011.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 01-2.25 2.25h-2.25z" />
</svg>
<span class="px-2">About</span>
</a>
</li>
</ul>
</nav>
</div>
//SCRIPT
<script>
function handleClick(event) {
// Remove the active class from all links
document.querySelectorAll('a').forEach((el) => {
el.classList.remove('bg-blue-700');
});
// Add the active class to the clicked link
const currentLink = event.target.closest('a');
currentLink.classList.add('bg-blue-700');
}
</script>Second Navbar Component
Dark navbar component with light gray background on each menu on hover. A search box and if you wanna add any options hamburger is also there.
<div class="container flex flex-row justify-center">
<nav class="bg-gray-800 flex items-center gap-3 px-3 py-3 text-white rounded-2xl ">
<div class="w-16 logo px-4 cursor-pointer">
<img src="./public/images/me.jpg" class="rounded-3xl shadow-white-lg" alt="">
</div>
<ul class="flex flex-row items-center gap-2 p-2">
<li>
<a href=""
class="px-3 py-2 hover:transparent text-white bg-gray-700 ease-in-out rounded-lg transition-all cursor-pointer">
Dashboard
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent hover:bg-gray-700 ease-in-out rounded-lg transition-all cursor-pointer">
Activity
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent hover:bg-gray-700 ease-in-out rounded-lg transition-all cursor-pointer">
Schedule
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent hover:bg-gray-700 ease-in-out rounded-lg transition-all cursor-pointer">
Integration
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent hover:bg-gray-700 ease-in-out rounded-lg transition-all cursor-pointer">
Setting
</a>
</li>
</ul>
<div class=" logo px-4 cursor-pointer flex items-center gap-3">
<input type="text"
class="placeholder:text-white bg-gray-700 focus-within:outline-none focus-within:ring-transparent rounded-md focus:outline-none"
placeholder="search">
<button class="bg-blue-700 px-3 py-2 rounded-lg hover:bg-blue-800">Submit Report</button>
<button class="bg-gray-700 px-3 py-2 rounded-lg hover:-rotate-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</nav>
</div>Third Navbar Component
A neat and clean navbar component with a gray background and brand logo.
<!-- 3rd css -->
<div class="container flex flex-row justify-center my-3">
<nav class="bg-white flex items-center gap-3 px-3 py-3 border text-white rounded-2xl ">
<div class="w-16 logo px-4 cursor-pointer">
<img src="./public/images/me.jpg" class="rounded-3xl border shadow-white-lg" alt="">
</div>
<ul class="flex flex-row items-center gap-2 p-2 ">
<li>
<a href=""
class="px-3 py-2 hover:transparent text-black hover:bg-gray-100 ease-in-out rounded-lg transition-all cursor-pointer">
Dashboard
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent text-black hover:bg-gray-100 ease-in-out rounded-lg transition-all cursor-pointer">
Activity
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent text-black hover:bg-gray-100 ease-in-out rounded-lg transition-all cursor-pointer">
Schedule
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent text-black hover:bg-gray-100 ease-in-out rounded-lg transition-all cursor-pointer">
Integration
</a>
</li>
<li>
<a href=""
class="px-3 py-2 hover:transparent text-black hover:bg-gray-100 ease-in-out rounded-lg transition-all cursor-pointer">
Setting
</a>
</li>
</ul>
</nav>
</div>Fourth Navbar Component
Again a white background nav component that has a gray background on hover and if you want you can set this to active as well. It has a shadow in the background.
<div class="container flex flex-row justify-center my-3 py-4 backdrop:blur-lg">
<nav class="shadow-lg flex items-center gap-3 px-3 py-3 border text-white rounded-full ">
<div class="w-16 logo px-3 cursor-pointer p-2 ">
<img src="./public/images/me.jpg" class="rounded-3xl border border-blue-500 shadow-lg" alt="">
</div>
<ul class="flex flex-row items-center gap-2 p-2 ">
<li>
<a href=""
class="px-3 backdrop:blur-md hover:backdrop:blur-lg py-3 hover:transparent text-black hover:bg-slate-100 ease-in-out rounded-full transition-all cursor-pointer">
Dashboard
</a>
</li>
<li>
<a href=""
class="px-3 backdrop:blur-md py-3 hover:transparent text-black hover:bg-slate-100 ease-in-out rounded-full transition-all cursor-pointer">
Activity
</a>
</li>
<li>
<a href=""
class="px-3 backdrop:blur-md py-3 hover:transparent text-black hover:bg-slate-100 ease-in-out rounded-full transition-all cursor-pointer">
Schedule
</a>
</li>
<li>
<a href=""
class="px-3 backdrop:blur-md py-3 hover:transparent text-black hover:bg-slate-100 ease-in-out rounded-full transition-all cursor-pointer">
Integration
</a>
</li>
<li>
<a href=""
class="px-3 backdrop:blur-md py-3 hover:transparent text-black hover:bg-slate-100 ease-in-out rounded-full transition-all cursor-pointer">
Setting
</a>
</li>
</ul>
</nav>
</div>5th Navbar Component
This component is a little extra helpful because this has a dropdown with a smooth experience.
//HTML
<div class="container flex flex-row justify-center my-3 py-4 backdrop:blur-lg">
<header>
<nav class="bg-white p-4 ">
<div class="container mx-auto flex items-center justify-between">
<!-- Brand Logo -->
<a href="#" class="text-white text-lg font-bold w-10 border border-gray-300 rounded-3xl">
<img src="./public/images/me.jpg" class="rounded-3xl shadow-lg" alt="Me">
</a>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-4 ">
<a href="#" class="text-gray-700 py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">Home</a>
<a href="#" class="text-gray-700 py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">About</a>
<a href="#" id="categoriesDropdown" class="text-gray-700 py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">
<div class="flex flex-row">
<span>Categories</span>
<span class="text-xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 ps-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
</svg>
</span>
</div>
<div class="cat-dropdown w-40 p-2 shadow-xl absolute mt-2 bg-white rounded-md hidden">
<ul>
<li class="text-gray-700 p-2 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">
PHP</li>
<li class="text-gray-700 p-2 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">
Laravel</li>
<li class="text-gray-700 p-2 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">
Livewire</li>
<li class="text-gray-700 p-2 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">
Js</li>
</ul>
</div>
</a>
<a href="#" class="text-gray-700 py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out">Contact</a>
</div>
<!-- Optional Right Content -->
<div class="hidden md:flex items-center space-x-4">
<!-- Add any additional content here -->
</div>
<!-- Mobile Menu Button (Hidden on larger screens) -->
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</nav>
</header>
</div>
// JS
<script>
//dropdown
let categoryDropdown = document.getElementById('categoriesDropdown');
document.addEventListener('DOMContentLoaded', function () {
const dropdownToggle = document.getElementById('categoriesDropdown');
const dropdownContent = document.querySelector('.cat-dropdown');
dropdownToggle.addEventListener('mouseenter', function () {
dropdownContent.classList.remove('hidden');
});
dropdownToggle.addEventListener('mouseleave', function () {
dropdownContent.classList.add('hidden');
});
});
</script>I hope this will help you. I built these components and thought maybe it would help you.
Source Code Repository: https://github.com/robinkashyap-01/tailwind-components
If you want to thank me, Share on Twitter (X) and tag me. Let’s connect.
Let’s Connect On X: Robin
Read About Tailwind Css: Tailwind Css
Related: Card Components In Tailwind Css
