---
title: "StoreHeader"
description: "A two-tier header: utility strip, brand with Hanko, search as a slot, actions and navigation with an active state."
kind: block
id: C-049
category: storefront
registry: "store-header"
docs: "https://koten.codehive.com.co/blocks/storefront/store-header"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/store-header.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/store-header.json"
language: en
---

# StoreHeader · 店舗ヘッダー

> Block C-049 in the Koten UI catalog.

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

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

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

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/store-header.json
```

## Files

- `@/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`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Full header

Search and actions arrive as nodes; the brand pairs the Hanko seal with a serif name.

```tsx
<StoreHeader
  brand={{ name: "HIKARI", jp: "光", href: "/", label: "HIKARI, home" }}
  utility={{ left: "Free shipping · Store pickup", right: "HIKARI ONLINE" }}
  search={
    <SearchBar
      label="Search products"
      placeholder="Name, model or keyword"
      categoriesLabel="Categories"
      categories={categories}
      submitLabel="Search"
    />
  }
  actions={<CartLink count={0} />}
  navLabel="Categories"
  navItems={categories}
  menuLabel="Menu"
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `brand` | `{ name: string; jp?: string; href: string; label: string }` | `—` | jp feeds the Hanko and the accessible name of the home link. |
| `utility` | `{ left: ReactNode; right?: ReactNode }` | `—` | Inverted top strip for shipping, pickup or short notices. |
| `search` | `ReactNode` | `—` | Search slot; on mobile it drops to its own row. |
| `actions` | `ReactNode` | `—` | Account, cart or other links; each one keeps its accessible name. |
| `navItems` | `readonly StoreNavItem[]` | `—` | Each item defines id, label, href and, optionally, active. |
| `navLabel` | `string` | `—` | Accessible name of the category <nav>. |
| `menuLabel` | `string` | `—` | Menu hint shown on narrow screens only. |

## 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.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/store-header
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/store-header.md
- Repository: https://github.com/codehive-colombia/koten