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)

603

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
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.2k
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.

Author:
Coastal UI

9 months ago

2.6k
Tesla Navbar
a tesla navbar

Author:
Cristian

10 months ago

2.3k
Basic Auto-Hiding Navbar

Author:
Anonymous

9 months ago

1.9k
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.5k
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

3 months ago

289
Fixed navbar

Author:
Oliver Hansen

2 years ago

25.8k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

1 year ago

6.9k
Responsive Gradient Navbar with Toggle
A modern, responsive navbar built with Tailwind CSS. Features a gradient background, flex layout, smooth hover effects, and a mobile toggle menu for optimal usability on all screen sizes.

Author:
Sudip chaudhary

3 months ago

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

Author:
Nick Girga

3 months ago

264
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

7 months ago

1.6k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

16.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components