---
title: "Breadcrumb"
description: "Shows the hierarchical path to the current page. The last item is marked as current while the earlier ones stay navigable."
kind: component
id: C-027
registry: "breadcrumb"
docs: "https://koten.codehive.com.co/components/breadcrumb"
markdown: "https://koten.codehive.com.co/md/components/breadcrumb.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/breadcrumb.json"
language: en
---

# Breadcrumb · パンくず

> Component C-027 in the Koten UI catalog.

Shows the hierarchical path to the current page. The last item is marked as current while the earlier ones stay navigable.

> 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/breadcrumb.json

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

## Files

- `@/components/ui/breadcrumb.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Default path

The last item needs no href: it renders as text and receives aria-current=page.

```tsx
<Breadcrumb
  label="Breadcrumb"
  items={[
    { label: "Home", href: "/" },
    { label: "Orders", href: "/orders" },
    { label: "KURA-0142" },
  ]}
/>
```

### Custom separator

separator accepts any ReactNode; it stays decorative and outside the focus order.

```tsx
<Breadcrumb
  label="Breadcrumb"
  separator="›"
  items={[
    { label: "Catalog", href: "/catalog" },
    { label: "HIKARI", href: "/catalog/hikari" },
    { label: "K-1 case" },
  ]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | `{ label, href?, current? }[]` | `—` | The last item is current when no item declares it. |
| `label` | `string` | `—` | Accessible name of the nav; applied as aria-label. |
| `separator` | `ReactNode` | `"/"` | Decorative; hidden from screen readers. |
| `onNavigate` | `(href: string) => void` | `—` | Receives plain clicks on items with href; useful for a router. |
| `className` | `string` | `—` | Applied to the wrapping nav. |

## Accessibility

- The nav takes its aria-label from label, so it is distinct from other navigation landmarks.
- The list uses ol and li; the last item receives aria-current="page".
- Separators are decorative: aria-hidden and outside the focus order.
- onNavigate only intercepts plain clicks; modified clicks keep the browser behavior.

## Sources

- Catalog page: https://koten.codehive.com.co/components/breadcrumb
- Markdown: https://koten.codehive.com.co/md/components/breadcrumb.md
- Repository: https://github.com/codehive-colombia/koten