Brand Navbar

Menu side bar navigation bar

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

Navigations Navbar

Author ORGIN_DREAMS

Tailwind v3.4 1.2k 6

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

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.8k
Navbar compoent

Amit Pachange

3 years ago

17.3k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.2k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

3.9k
animated navigation bar

Md. Tofayel islam

1 year ago

3.1k
NavBar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.9k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Rathanak Phan

1 year ago

2.3k
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.1k