Navbar with buttons
Get a free Navbar 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">
<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">
<button>
<a class="block cursor-pointer rounded-full border-2 border-gray-900 px-6 py-1 text-sm font-medium hover:border-gray-900/70 hover:text-gray-900/70">Button</a>
</button>
<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 ☝-->
