devsnips
Search docs, APIs, guides…

Component

Ecommerce Navbar

Full-featured ecommerce navigation with top bar, search, categories, cart, wishlist, and account links. Complete shopping experience.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Top information bar
  • Integrated search with button
  • Cart with item count badge
  • Category navigation
  • Wishlist and account buttons

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/navigation/ecommerce-navbar/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Navigation/ecommerce-navbar
registry path: Tailwind/Components/Navigation/ecommerce-navbar

Source

Implementation

code.html 
<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>
          [email protected]
        </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>
107 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/navigation/ecommerce-navbar
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/navigation/ecommerce-navbar/

Install: npx devsnips add
Tailwind/Components/Navigation/ecommerce-navbar

This is the Ecommerce Navbar — Full-featured ecommerce navigation with top bar, search, categories, cart, wishlist, and account links. Complete shopping experience.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/navigation/ecommerce-navbar