navber

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 17-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Tanvir Hasan Bappy (Tanvir)

902

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" x-data="{ mobileMenuOpen: false, searchOpen: false, isScrolled: false }"
  x-init="window.addEventListener('scroll', () => isScrolled = window.scrollY > 50)">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MobileMaven Header</title>

<script src="https://cdn.tailwindcss.com"></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script src="https://unpkg.com/lucide@latest"></script>

<header class="sticky top-0 z-50 w-full transition-all duration-300"
  :class="isScrolled ? 'bg-white/90 dark:bg-gray-900/90 backdrop-blur shadow-sm' : 'bg-white dark:bg-gray-900'">

<a href="/" class="text-xl sm:text-2xl font-bold text-purple-600 hover:text-purple-500 transition-colors">
        MobileMaven
      </a>

<nav class="hidden lg:flex space-x-4 xl:space-x-6">
        <a href="/" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 transition text-sm xl:text-base">Home</a>
        <a href="/" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 transition text-sm xl:text-base">Phones</a>
        <a href="/" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 transition text-sm xl:text-base">Accessories</a>
        <a href="/" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 transition text-sm xl:text-base">Wearables</a>
        <a href="/" class="text-orange-500 hover:text-orange-400 transition text-sm xl:text-base">Deals</a>
      </nav>

<div class="flex items-center space-x-2">

<button @click="searchOpen = !searchOpen" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
          <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6"></i>
        </button>

<button class="relative p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
          <i data-lucide="shopping-cart" class="w-5 h-5 sm:w-6 sm:h-6"></i>
          <span class="absolute -top-1 -right-1 bg-purple-600 text-white text-[10px] sm:text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
        </button>

<a href="/profile" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
          <i data-lucide="user" class="w-5 h-5 sm:w-6 sm:h-6"></i>
        </a>

<button
          class="lg:hidden p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
          @click="mobileMenuOpen = !mobileMenuOpen"
          x-init="$watch('mobileMenuOpen', () => lucide.createIcons())"
        >
          <i :data-lucide="mobileMenuOpen ? 'x' : 'menu'" class="w-5 h-5 sm:w-6 sm:h-6"></i>
        </button>
      </div>
    </div>

<div x-show="searchOpen" x-cloak x-transition class="mt-2 border-t pt-3">
      <div class="relative">
        <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4"></i>
        <input
          type="search"
          placeholder="Search products..."
          class="w-full py-2 pl-10 pr-4 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
          autofocus
        />
      </div>
    </div>

<div x-show="mobileMenuOpen" x-cloak x-transition class="lg:hidden mt-3 border-t pt-3 space-y-2 pb-4">
      <a href="/" class="block py-2 px-3 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Home</a>
      <a href="/s" class="block py-2 px-3 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Phones</a>
      <a href="/" class="block py-2 px-3 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Accessories</a>
      <a href="/" class="block py-2 px-3 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Wearables</a>
      <a href="/" class="block py-2 px-3 rounded text-orange-500 hover:bg-gray-100 dark:hover:bg-gray-800">Deals</a>
      <hr class="border-gray-200 dark:border-gray-700" />
      <a href="/" class="block py-2 px-3 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Sign In</a>
      <a href="/" class="block py-2 px-3 rounded hover:bg-gray-100 dark:hover:bg-gray-800">Register</a>
    </div>
  </div>
</header>

<script>
  lucide.createIcons();
</script>

</body>
</html>

Related Examples

Material 3 AppBar [Light]
A navbar/appbar that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

5 months ago

348
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

7 months ago

1.5k
less is more
less is more by salvator

Author:
Baraka Salvator

4 months ago

714
beautifull responsive navbar
I create a attractive responsive navbar using tailwindcss and custom css. also work on mobile devices.

Author:
Akram Khan

1 year ago

3.4k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

4.7k
Admin Panel
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

514
websitee

Author:
Anonymous

4 months ago

296
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

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

Author:
inbarajan P

1 year ago

2.5k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

16.6k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

8 months ago

1.6k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components