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)

1.1k

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

navbar in tailwindcss
it is a navbar for practise purpose

Author:
Md. Aynal Haque

3 months ago

218
Navbar with Dropdown
Navbar with dropdown

Author:
Razeem Razak

3 months ago

519
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1.1k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

1 year ago

3.7k
Modern page
hero page by salvator

Author:
Baraka Salvator

8 months ago

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

Author:
Nick Girga

8 months ago

791
avigation Mobile iOS - SPA
avigation Mobile iOS - SPA

Author:
Omer fils ELENGA

2 months ago

260
Navbar with two CTA buttons

Author:
Juraj

1 year ago

1.6k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

2 years ago

27.8k
Responsive Header

Author:
Rajesh Maheshwari

11 months ago

1.6k
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

2 months ago

135
pasta
by salvator

Author:
Baraka Salvator

8 months ago

899

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components