Header E-commerce Modern

                <!--
@type: Header
@industry: E-commerce
@style: Modern
@category: Navigation, Page Section
@framework: Tailwind
@license: Pro
-->

<style>
  /* Custom styles for dropdown animations and mobile menu */
  .dropdown-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
  }
  
  .dropdown-content.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .mobile-menu.show {
    transform: translateX(0);
  }
  
  .mobile-search {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }
  
  .mobile-search.show {
    max-height: 100px;
  }
  
  /* Focus styles */
  .focus-ring:focus-visible {
    outline: none;
    border-color: rgb(249 115 22);
    box-shadow: 0 0 0 3px rgb(249 115 22 / 0.5);
  }
</style>
<header class="sticky top-0 z-50 w-full bg-white border-b border-gray-200 shadow-sm">
    <!-- Top Banner -->
    <div class="bg-orange-500 text-white text-center py-2 px-4">
        <p class="text-sm font-medium">🎉 Free shipping on orders over $100 | Use code: FREESHIP100</p>
    </div>
    
    <!-- Main Header -->
    <div class="px-4">
        <div class="flex h-16 items-center justify-between">
            <!-- Mobile Menu Button -->
            <button 
                id="mobile-menu-trigger" 
                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 hover:bg-gray-100 hover:text-gray-900 size-9 lg:hidden focus-ring"
                type="button"
                aria-label="Toggle menu"
            >
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
                    <line x1="4" x2="20" y1="12" y2="12"></line>
                    <line x1="4" x2="20" y1="6" y2="6"></line>
                    <line x1="4" x2="20" y1="18" y2="18"></line>
                </svg>
                <span class="sr-only">Toggle menu</span>
            </button>

            <!-- Logo -->
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8 text-orange-500">
                    <path d="m7.5 4.27 9 5.15"></path>
                    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
                    <path d="m3.3 7 8.7 5 8.7-5"></path>
                    <path d="M12 22V12"></path>
                </svg>
                <span class="text-2xl font-bold text-gray-900">StyleHub</span>
            </div>

            <!-- Desktop Navigation -->
            <nav class="hidden lg:flex items-center gap-4">
                <!-- Categories Dropdown -->
                <div class="relative">
                    <button 
                        id="categories-trigger"
                        type="button" 
                        class="flex items-center gap-1 text-gray-700 hover:text-orange-500 transition-colors font-medium focus-ring rounded px-2 py-1"
                        aria-haspopup="menu"
                        aria-expanded="false"
                    >
                        Categories
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                            <path d="m6 9 6 6 6-6"></path>
                        </svg>
                    </button>
                    <div 
                        id="categories-dropdown" 
                        class="dropdown-content absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10"
                        role="menu"
                    >
                        <a href="/fashion" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                                <path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"></path>
                            </svg>
                            <span>Fashion</span>
                        </a>
                        <a href="/electronics" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                                <rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect>
                                <path d="M12 18h.01"></path>
                            </svg>
                            <span>Electronics</span>
                        </a>
                        <a href="/watches" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                                <circle cx="12" cy="12" r="6"></circle>
                                <polyline points="12,10 12,12 13,13"></polyline>
                                <path d="m16.13 7.66-.81-4.05a2 2 0 0 0-2-1.61h-2.68a2 2 0 0 0-2 1.61l-.78 4.05"></path>
                                <path d="m7.88 16.36.8 4a2 2 0 0 0 2 1.61h2.72a2 2 0 0 0 2-1.61l.81-4.05"></path>
                            </svg>
                            <span>Watches</span>
                        </a>
                        <a href="/home" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9,22 9,12 15,12 15,22"></polyline>
                            </svg>
                            <span>Home & Living</span>
                        </a>
                        <a href="/beauty" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                                <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
                                <path d="M5 3v4"></path>
                                <path d="M19 17v4"></path>
                                <path d="M3 5h4"></path>
                                <path d="M17 19h4"></path>
                            </svg>
                            <span>Beauty</span>
                        </a>
                    </div>
                </div>

                <!-- Navigation Items -->
                <a href="/new-arrivals" class="relative text-gray-700 hover:text-orange-500 transition-colors font-medium focus-ring rounded px-2 py-1">
                    New Arrivals
                </a>
                <a href="/best-sellers" class="relative text-gray-700 hover:text-orange-500 transition-colors font-medium focus-ring rounded px-2 py-1">
                    Best Sellers
                </a>
                <a href="/sale" class="relative text-gray-700 hover:text-orange-500 transition-colors font-medium focus-ring rounded px-2 py-1">
                    Sale
                </a>
                <a href="/brands" class="relative text-gray-700 hover:text-orange-500 transition-colors font-medium focus-ring rounded px-2 py-1">
                    Brands
                </a>
            </nav>

            <!-- Search Bar -->
            <div class="hidden xl:flex items-center flex-1 max-w-md mx-8">
                <div class="relative w-full">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    <input
                        type="search"
                        placeholder="Search products, brands, categories..."
                        class="pl-10 pr-4 py-2 w-full border border-gray-200 rounded-md focus-ring bg-transparent text-base"
                    />
                </div>
            </div>

            <!-- Right Actions -->
            <div class="flex items-center gap-2">
                <!-- Mobile Search -->
                <button 
                    id="mobile-search-trigger"
                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all hover:bg-gray-100 hover:text-gray-900 size-9 xl:hidden focus-ring"
                    aria-label="Search"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    <span class="sr-only">Search</span>
                </button>

                <!-- Wishlist -->
                <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all hover:bg-gray-100 hover:text-gray-900 size-9 sm:flex focus-ring" aria-label="Wishlist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
                    </svg>
                    <span class="sr-only">Wishlist</span>
                </button>

                <!-- Account Dropdown -->
                <div class="relative">
                    <button 
                        id="account-trigger"
                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all hover:bg-gray-100 hover:text-gray-900 size-9 focus-ring"
                        type="button"
                        aria-haspopup="menu"
                        aria-expanded="false"
                        aria-label="Account"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        <span class="sr-only">Account</span>
                    </button>
                    <div 
                        id="account-dropdown" 
                        class="dropdown-content absolute top-full right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10"
                        role="menu"
                    >
                        <a href="/signin" class="block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">Sign In</a>
                        <a href="/register" class="block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">Create Account</a>
                        <a href="/orders" class="block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">My Orders</a>
                        <a href="/settings" class="block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors" role="menuitem">Account Settings</a>
                    </div>
                </div>

                <!-- Shopping Cart -->
                <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all hover:bg-gray-100 hover:text-gray-900 size-9 relative focus-ring" aria-label="Shopping cart">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                        <circle cx="8" cy="21" r="1"></circle>
                        <circle cx="19" cy="21" r="1"></circle>
                        <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
                    </svg>
                    <span id="cart-count" class="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-orange-500 text-white text-xs flex items-center justify-center p-0 font-medium">3</span>
                    <span class="sr-only">Shopping cart</span>
                </button>

                <!-- CTA Button -->
                <button class="hidden xl:flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-all bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 focus-ring">
                    Shop Now
                </button>
            </div>
        </div>

        <!-- Mobile Search Bar -->
        <div id="mobile-search" class="mobile-search lg:hidden border-t">
            <div class="py-4">
                <div class="relative">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    <input
                        type="search"
                        placeholder="Search products, brands, categories..."
                        class="pl-10 pr-4 py-2 w-full border border-gray-200 rounded-md focus-ring bg-transparent text-base"
                    />
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Mobile Menu Overlay -->
<div id="mobile-menu-overlay" class="fixed inset-0 z-40 bg-black bg-opacity-50 hidden"></div>

<!-- Mobile Menu -->
<div id="mobile-menu" class="mobile-menu fixed top-0 left-0 z-50 h-full w-[300px] sm:w-[400px] bg-white shadow-lg">
    <div class="flex flex-col h-full">
        <!-- Mobile Menu Header -->
        <div class="flex items-center justify-between p-4 border-b">
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-orange-500">
                    <path d="m7.5 4.27 9 5.15"></path>
                    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
                    <path d="m3.3 7 8.7 5 8.7-5"></path>
                    <path d="M12 22V12"></path>
                </svg>
                <span class="text-xl font-bold">StyleHub</span>
            </div>
            <button id="mobile-menu-close" class="p-2 hover:bg-gray-100 rounded-md" aria-label="Close menu">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                    <path d="m18 6-12 12"></path>
                    <path d="m6 6 12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Mobile Menu Content -->
        <nav class="flex flex-col p-4 space-y-4 flex-1 overflow-y-auto">
            <!-- Categories Section -->
            <div class="space-y-3">
                <h3 class="font-semibold text-gray-900">Categories</h3>
                <a href="/fashion" class="flex items-center gap-3 text-gray-600 hover:text-orange-500 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                        <path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"></path>
                    </svg>
                    Fashion
                </a>
                <a href="/electronics" class="flex items-center gap-3 text-gray-600 hover:text-orange-500 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                        <rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect>
                        <path d="M12 18h.01"></path>
                    </svg>
                    Electronics
                </a>
                <a href="/watches" class="flex items-center gap-3 text-gray-600 hover:text-orange-500 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                        <circle cx="12" cy="12" r="6"></circle>
                        <polyline points="12,10 12,12 13,13"></polyline>
                        <path d="m16.13 7.66-.81-4.05a2 2 0 0 0-2-1.61h-2.68a2 2 0 0 0-2 1.61l-.78 4.05"></path>
                        <path d="m7.88 16.36.8 4a2 2 0 0 0 2 1.61h2.72a2 2 0 0 0 2-1.61l.81-4.05"></path>
                    </svg>
                    Watches
                </a>
                <a href="/home" class="flex items-center gap-3 text-gray-600 hover:text-orange-500 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9,22 9,12 15,12 15,22"></polyline>
                    </svg>
                    Home & Living
                </a>
                <a href="/beauty" class="flex items-center gap-3 text-gray-600 hover:text-orange-500 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                        <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
                        <path d="M5 3v4"></path>
                        <path d="M19 17v4"></path>
                        <path d="M3 5h4"></path>
                        <path d="M17 19h4"></path>
                    </svg>
                    Beauty
                </a>
            </div>

            <!-- Navigation Items Section -->
            <div class="space-y-3 pt-4 border-t">
                <a href="/new-arrivals" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors">
                    <span>New Arrivals</span>
                </a>
                <a href="/best-sellers" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors">
                    <span>Best Sellers</span>
                </a>
                <a href="/sale" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors">
                    <span>Sale</span>
                </a>
                <a href="/brands" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors">
                    <span>Brands</span>
                </a>
            </div>
        </nav>
    </div>
</div>

<script>
  // State variables
  let cartCount = 3;
  let isSearchOpen = false;

  // Mobile menu functionality
  const mobileMenuTrigger = document.getElementById('mobile-menu-trigger');
  const mobileMenu = document.getElementById('mobile-menu');
  const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
  const mobileMenuClose = document.getElementById('mobile-menu-close');

  function openMobileMenu() {
      mobileMenu.classList.add('show');
      mobileMenuOverlay.classList.remove('hidden');
  }

  function closeMobileMenu() {
      mobileMenu.classList.remove('show');
      mobileMenuOverlay.classList.add('hidden');
  }

  mobileMenuTrigger.addEventListener('click', openMobileMenu);
  mobileMenuOverlay.addEventListener('click', closeMobileMenu);
  mobileMenuClose.addEventListener('click', closeMobileMenu);

  // Mobile search functionality
  const mobileSearchTrigger = document.getElementById('mobile-search-trigger');
  const mobileSearch = document.getElementById('mobile-search');

  mobileSearchTrigger.addEventListener('click', () => {
      isSearchOpen = !isSearchOpen;
      mobileSearch.classList.toggle('show', isSearchOpen);
  });

  // Dropdown toggle functionality
  function setupDropdown(triggerId, dropdownId) {
      const trigger = document.getElementById(triggerId);
      const dropdown = document.getElementById(dropdownId);

      if (!trigger || !dropdown) return;

      let isOpen = false;

      trigger.addEventListener('click', (e) => {
          e.stopPropagation();
          isOpen = !isOpen;
          dropdown.classList.toggle('show', isOpen);
          trigger.setAttribute('aria-expanded', isOpen);
      });

      document.addEventListener('click', (e) => {
          if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {
              if (isOpen) {
                  dropdown.classList.remove('show');
                  trigger.setAttribute('aria-expanded', 'false');
                  isOpen = false;
              }
          }
      });
  }

  // Initialize dropdowns
  setupDropdown('categories-trigger', 'categories-dropdown');
  setupDropdown('account-trigger', 'account-dropdown');
</script>