Product Filter Horizontal

Fetch pattern JSON: curl https://webspire.de/patterns/product-filter/horizontal.json

horizontal.html

<nav
  class="ws-product-filter"
  style="
    --ws-product-filter-bg: oklch(0.98 0.005 75);
    --ws-product-filter-text: oklch(0.2 0.02 75);
    --ws-product-filter-text-soft: oklch(0.45 0.015 75);
    --ws-product-filter-border: oklch(0.85 0.01 75);
    --ws-product-filter-accent: oklch(0.55 0.15 150);
    --ws-product-filter-action-bg: oklch(0.35 0.02 75);
    --ws-product-filter-action-text: oklch(0.98 0.005 75);
  "
>
  <div class="mx-auto max-w-7xl px-6" style="color:var(--ws-product-filter-text)">
    <div class="rounded-xl px-5 py-4" style="background:var(--ws-product-filter-bg);border:1px solid var(--ws-product-filter-border)" role="search" aria-label="Product filters">
      <!-- Filter Pills -->
      <div class="flex flex-wrap items-center gap-3">
        <span class="text-sm font-semibold" style="color:var(--ws-product-filter-text)">Filter by:</span>

        <button type="button" class="inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium transition hover:opacity-80" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text)">
          Category
          <svg class="h-4 w-4" style="color:var(--ws-product-filter-text-soft)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
        </button>

        <button type="button" class="inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium transition hover:opacity-80" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text)">
          Price
          <svg class="h-4 w-4" style="color:var(--ws-product-filter-text-soft)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
        </button>

        <button type="button" class="inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium transition hover:opacity-80" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text)">
          Brand
          <svg class="h-4 w-4" style="color:var(--ws-product-filter-text-soft)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
        </button>

        <button type="button" class="inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium transition hover:opacity-80" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text)">
          Rating
          <svg class="h-4 w-4" style="color:var(--ws-product-filter-text-soft)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
        </button>

        <a href="#" class="ml-auto text-sm font-medium transition hover:opacity-70" style="color:var(--ws-product-filter-text-soft)">Clear filters</a>
      </div>

      <!-- Active Filters (chips) -->
      <div class="mt-3 flex flex-wrap items-center gap-2">
        <span class="text-xs" style="color:var(--ws-product-filter-text-soft)">Active:</span>

        <span class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium" style="background:var(--ws-product-filter-accent);color:var(--ws-product-filter-action-text)">
          Electronics
          <button type="button" class="ml-0.5 transition hover:opacity-70" aria-label="Remove Electronics filter">
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </span>

        <span class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium" style="background:var(--ws-product-filter-accent);color:var(--ws-product-filter-action-text)">
          $50 - $200
          <button type="button" class="ml-0.5 transition hover:opacity-70" aria-label="Remove price filter">
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </span>

        <span class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium" style="background:var(--ws-product-filter-accent);color:var(--ws-product-filter-action-text)">
          4 stars &amp; up
          <button type="button" class="ml-0.5 transition hover:opacity-70" aria-label="Remove rating filter">
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</nav>

Details

Family

product-filter

Tier

enhanced

Kind

component

Extends

product-filter/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

e-commercefilterhorizontalpillschipstoolbar

Slots

Name	Required	Description
filterPills	Yes	Dropdown-style filter trigger buttons.
activeFilters	No	Active filter chips with remove buttons.
clearAction	No	Clear all filters link.

Props

Name	Type	Default	Description
maxWidth	string	max-w-7xl	Container max width utility.

Horizontal variant for above-grid filter toolbars. Use when vertical sidebar space is not available or for mobile-first layouts.