Navbar with search
Get a free Navbar with search bars for your website. It is made using HTML/CSS, Tailwind CSS and AlpineJs. In addition to this resource, we have many more available on our website. Get the code you need to create stunning landing pages with our free code blocks/components made in Tailwind CSS.
Technology Used:
Tailwindcss v3
AlpineJs v3
<script src="//unpkg.com/alpinejs" defer></script>
<nav x-data aria-label="Site Navbar" class="overflow-x-hidden">
<div class="bg-gray-100 border-b">
<div class="mx-auto max-w-screen-xl px-4 py-4">
<div class="flex items-center justify-between gap-x-8">
<a class="flex cursor-pointer items-center gap-x-1">
<img width="28" height="28" class="object-cover" src="https://ankitcodes.com/uploads/fAPFuFMfl3vI8NS7wgTPopqD9FBtgt-metaZmF2aWNvbi5wbmc=-.png" alt="logo" />
<span class="text-lg font-black text-gray-900">CODES</span>
</a>
<ul class="flex items-center gap-x-6">
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">Home</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">Products</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">Service</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">Contacts</a>
</li>
<li class="flex items-center gap-x-4 sm:w-56">
<form class="relative flex items-center gap-x-1 rounded-full bg-white">
<label class="w-full">
<input class="mr-12 w-full rounded-full border-2 border-gray-900 px-4 py-2 pr-10 text-sm font-medium text-gray-900 outline-0 ring-gray-400 focus:ring-2" type="text" placeholder="I'm searching for..." />
</label>
<button class="absolute right-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</button>
</form>
<button
@click="
$refs.dropdown.classList.toggle('h-[180px]')
$refs.menu.classList.toggle('hidden')
$refs.close.classList.toggle('hidden')
"
class="block cursor-pointer p-2 text-sm font-medium hover:border-gray-900/70 hover:text-gray-900/70 md:hidden"
>
<svg x-ref="menu" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-ref="close" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</li>
</ul>
</div>
</div>
<div x-ref="dropdown" class="duration-900 h-0 overflow-y-hidden transition-all md:hidden">
<hr />
<ul class="mx-auto max-w-screen-xl px-4 py-4">
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-gray-900 hover:text-gray-50">HOME</a>
</li>
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-gray-900 hover:text-gray-50">PRODUCTS</a>
</li>
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-gray-900 hover:text-gray-50">SERVICE</a>
</li>
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-gray-900 hover:text-gray-50">CONTACTS</a>
</li>
</ul>
</div>
</div>
</nav>
<!--π NAVBAR CODE β-->