Ecommerce Navbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Top Bar -->
    <div class="hidden md:flex items-center justify-between h-10 text-xs text-gray-500">
      <div class="flex items-center gap-4">
        <span class="flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
          </svg>
          +1 (555) 123-4567
        </span>
        <span class="flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
          support@shopmart.com
        </span>
      </div>
      <div class="flex items-center gap-4">
        <a href="#" class="hover:text-gray-900">Track Order</a>
        <span>|</span>
        <a href="#" class="hover:text-gray-900">Help</a>
        <span>|</span>
        <div class="relative">
          <button class="flex items-center gap-1 hover:text-gray-900">
            USD $
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Main Navigation -->
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
          </svg>
        </div>
        <span class="text-gray-900 text-2xl font-bold">ShopMart</span>
      </a>

      <!-- Search Bar -->
      <div class="hidden md:flex flex-1 max-w-xl mx-8">
        <div class="relative w-full">
          <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
          </div>
          <input type="text" placeholder="Search for products..." class="w-full pl-12 pr-4 py-3 bg-gray-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white transition-all">
          <button class="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 transition-colors">
            Search
          </button>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex items-center gap-5">
        <button class="hidden sm:flex flex-col items-center text-gray-600 hover:text-orange-500 transition-colors" aria-label="Account">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
          <span class="text-xs mt-1">Account</span>
        </button>
        <button class="hidden sm:flex flex-col items-center text-gray-600 hover:text-orange-500 transition-colors" aria-label="Wishlist">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
          </svg>
          <span class="text-xs mt-1">Wishlist</span>
        </button>
        <button class="relative flex flex-col items-center text-gray-600 hover:text-orange-500 transition-colors" aria-label="Cart">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
          </svg>
          <span class="absolute -top-1 -right-1 w-5 h-5 bg-orange-500 text-white text-xs font-bold rounded-full flex items-center justify-center">3</span>
          <span class="text-xs mt-1">Cart</span>
        </button>
      </div>
    </div>

    <!-- Category Navigation -->
    <div class="hidden md:block border-t border-gray-100 -mx-4 sm:mx-0 sm:-mx-6 lg:mx-0">
      <div class="flex items-center gap-8 h-12 text-sm">
        <div class="relative group">
          <button class="flex items-center gap-1 text-gray-900 font-medium hover:text-orange-500 transition-colors">
            All Categories
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
        </div>
        <a href="#" class="text-gray-600 hover:text-orange-500 transition-colors">Electronics</a>
        <a href="#" class="text-gray-600 hover:text-orange-500 transition-colors">Fashion</a>
        <a href="#" class="text-gray-600 hover:text-orange-500 transition-colors">Home & Garden</a>
        <a href="#" class="text-gray-600 hover:text-orange-500 transition-colors">Sports</a>
        <a href="#" class="text-gray-600 hover:text-orange-500 transition-colors">Beauty</a>
        <a href="#" class="text-gray-600 hover:text-orange-500 transition-colors">Toys & Games</a>
        <a href="#" class="text-orange-500 font-medium">Sale</a>
      </div>
    </div>
  </div>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12

# Ecommerce Navbar

Ecommerce storefront navbar.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/ecommerce-navbar
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`