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)

491

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

Navigation bar
Navbar

Author:
Aman kumar

1 year ago

3.6k
Hero simple
hero design simple

Author:
QQ-VVN

3 months ago

413
Modern page
hero page by salvator

Author:
Baraka Salvator

2 months ago

563
Navbar with two CTA buttons

Author:
Juraj

6 months ago

1.1k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

2 months ago

180
basichtml
this is basic html

Author:
Anonymous

1 month ago

116
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Author:
Mamadou Diouma II Bah

1 year ago

15.4k
Semi transparent navbar

Author:
Laurits

2 years ago

15.3k
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

4 months ago

877
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

3 months ago

659
tradition music
by salvator

Author:
Baraka Salvator

2 months ago

450
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Author:
Hielke Brandsma

9 months ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components