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)

790

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

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

5 months ago

990
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

3 months ago

641
less is more
less is more by salvator

Author:
Baraka Salvator

3 months ago

597
NavBar

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

9 months ago

2k
Nav Bar
Animated Mobile Dropdown menu

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

8 months ago

1.8k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

3 months ago

1.2k
Apple Dock Navigation Bar

Author:
Cristian

9 months ago

1.3k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

11 months ago

2.9k
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

8 months ago

3.4k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

16.6k
strawbery
by salvator

Author:
Baraka Salvator

4 months ago

644
Semi transparent navbar

Author:
Laurits

2 years ago

15.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components