Block · C-049 · storefront

StoreHeader

A two-tier header: utility strip, brand with Hanko, search as a slot, actions and navigation with an active state.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/store-header.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/store-header.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

The brand link gets an aria-label joining the Japanese seal and the descriptive label.
Navigation is a named <nav> and marks the current page with aria-current.
Category links scroll horizontally without losing the visible focus ring.
Search keeps its own landmark and the actions slot must not break accessible names.

Read the whole page