Home
ORGIN_DREAMS
Brand Navbar

Brand Navbar

Menu side bar navigation bar

This tailwind example is contributed by ORGIN_DREAMS, on 23-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Navigations Navbar

Author ORGIN_DREAMS

Fork Fullscreen

<nav class="bg-white shadow fixed top-0 w-full z-50">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex justify-between items-center h-16">
      <div class="text-2xl font-bold text-blue-600">Brand</div>
      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Features</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Pricing</a>
        <div class="relative group">
          <button class="inline-flex items-center text-gray-700 hover:text-blue-600 focus:outline-none">
            More
            <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
          </button>
          <div class="absolute hidden group-hover:block bg-white shadow-md rounded mt-2 py-2 w-40">
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">About</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Contact</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Help</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-700 focus:outline-none">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
      </div>
    </div>
  </div>
  <div id="mobile-menu" class="hidden md:hidden bg-white shadow-md">
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">Home</a>
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">Features</a>
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">Pricing</a>
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">About</a>
    <a href="#" class="block px-6 py-3 hover:bg-gray-100">Contact</a>
  </div>

btn.addEventListener('click', () => {
      menu.classList.toggle('hidden');
    });
  </script>
</nav>

Related Examples