Kaufmann Commerce UI / Storefront family
Navigation & Collections
A restrained responsive store header and horizontally compact collection control, both driven by serialisable payloads and narrow frontend events.
Store header
Desktop navigation collapses into a touch-friendly mobile menu. Search and cart expose events instead of assuming a router or commerce backend.
Store content begins here.
Collection filter
A single-row filter that stays useful at narrow widths and announces selection through kaufmann:collection-change — a two-way seam, so an outside reset moves the pill too. Built on React Aria's ToggleButtonGroup: the pills are one tab stop and one radio group. Arrows, Home and End move focus; Enter or Space commits the choice. A focused pill scrolls itself back into the row with its ring intact.
---
import { CollectionFilter, StoreHeader } from "@kaufmann/ui";
---
<StoreHeader client:load brand={brand} navigation={navigation} />
<CollectionFilter client:load label="Filter collection" options={collections} />