---
title: "PageHeader"
description: "The page header: breadcrumbs, eyebrow, serif title, description, meta and actions. The title is the h1, so use it once per view."
kind: block
id: C-056
category: erp
registry: "page-header"
docs: "https://koten.codehive.com.co/blocks/erp/page-header"
markdown: "https://koten.codehive.com.co/md/blocks/erp/page-header.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/page-header.json"
language: en
---

# PageHeader · ページ見出し

> Block C-056 in the Koten UI catalog.

The page header: breadcrumbs, eyebrow, serif title, description, meta and actions. The title is the h1, so use it once per view.

> 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/page-header.json

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

## Files

- `@/components/patterns/page-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

Breadcrumb, eyebrow, title, description, meta and one primary action.

```tsx
<PageHeader
  breadcrumb={
    <Breadcrumb
      label="Breadcrumb"
      items={[{ label: "Home", href: "/" }, { label: "Orders" }]}
    />
  }
  eyebrow="Sales"
  title="Orders"
  description="Search, filter and process orders. Filters live in the URL."
  meta="132 orders · 21 Oct 2026"
  actions={<Button size="sm" variant="primary">New order</Button>}
/>
```

### Minimal title

Title and meta only: enough for a simple list view.

```tsx
<PageHeader title="Products" meta="24 products" />
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `breadcrumb` | `ReactNode` | `—` | Breadcrumbs above the eyebrow; use Breadcrumb for the nav and aria-current. |
| `eyebrow` | `ReactNode` | `—` | Category or section in small caps-like text. |
| `title` | `ReactNode` | `—` | Rendered as an h1; use a single PageHeader per page. |
| `description` | `ReactNode` | `—` | One or two lines with a readable max width. |
| `meta` | `ReactNode` | `—` | Counts, date or context in small text. |
| `actions` | `ReactNode` | `—` | Actions at the end of the header; they read after the title. |
| `className` | `string` | `—` | Adds to the component's base classes. |

## Accessibility

- The title is an h1: use one PageHeader per page so the main heading is not duplicated.
- Breadcrumbs live in a nav with aria-label; Breadcrumb already does this and marks the last item with aria-current.
- Actions read after the title in the DOM; the primary action must not rely on colour alone either.

## Sources

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