---
summary: ページ階層のパンくずリスト
category: Navigation
---

# Breadcrumbs

サイトの階層構造の中で現在のページがどこにあるかを、ホームを起点としたリンクの並びで示すパンくずリストです。
ユーザーが現在位置を把握し、上位の階層へ移動できるようにします。主要なナビゲーション（AppBar など）を補うもので、置き換えるものではありません。

## 基本の使い方

```tsx
import { Breadcrumb, Breadcrumbs } from 'wip-ui'

<nav aria-label="パンくずリスト">
  <Breadcrumbs>
    <Breadcrumb href="/">ホーム</Breadcrumb>
    <Breadcrumb href="/products">商品一覧</Breadcrumb>
    <Breadcrumb>商品詳細</Breadcrumb>
  </Breadcrumbs>
</nav>
```

## 構成要素

| 部品 | 役割 |
|---|---|
| Breadcrumbs | パンくずリスト全体。Breadcrumb を並べ、区切り記号を表示する |
| Breadcrumb | 各階層の項目 |

## 使う場面

- 階層的に配置されたページを持つ大規模な Web アプリケーションで、現在位置を示すとき
- 検索エンジンや外部リンクなど、外部から直接アクセスされる可能性が高いページ

## 使い方

### 項目

- [should] 先頭にはホームを置く
- [should] 末尾には現在のページを置き、リンクにしない
- [should] 末尾以外の項目は、その階層のページへのリンクにする
- 項目が多く1行に収まらない場合は、折り返して表示される

### 使わない場面

- [avoid] 他のナビゲーションの代わりとして Breadcrumbs だけを置かない
- [avoid] ホーム画面には置かない。現在位置を示す必要がないため

## アクセシビリティ

- [must] パンくずリストを、名前の付いたナビゲーションの領域で囲む

## 実装

- [should] 末尾以外の Breadcrumb には href を指定する。末尾の Breadcrumb には href を指定しない
- Breadcrumbs は、ナビゲーションの領域（`<nav>`）を自動で作らない
- [must] Breadcrumbs を `<nav aria-label="パンくずリスト">` で囲む

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Breadcrumbs

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| isDisabled | boolean | - | Whether the breadcrumbs are disabled. |
| onAction | ((key: Key) => void) | - | Handler that is called when a breadcrumb is clicked. |
| children | ChildrenOrFunction<LinkRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| items | Iterable<T> | - | Item objects in the collection. |
| dependencies | readonly any[] | - | Values that should invalidate the item cache when using dynamic collections. |
| id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| className | ClassNameOrFunction<LinkRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<LinkRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| slot | string \| null | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

### Breadcrumb

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| isDisabled | boolean | - | Whether the link is disabled. |
| onPress | ((e: PressEvent) => void) | - | Handler that is called when the press is released over the target. |
| onPressStart | ((e: PressEvent) => void) | - | Handler that is called when a press interaction starts. |
| onPressEnd | ((e: PressEvent) => void) | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressChange | ((isPressed: boolean) => void) | - | Handler that is called when the press state changes. |
| onPressUp | ((e: PressEvent) => void) | - | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | - | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides  additional event details for non-mouse interactions. |
| autoFocus | boolean | - | Whether the element should receive focus on render. |
| href | string | - | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | string | - | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| target | HTMLAttributeAnchorTarget | - | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| rel | string | - | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| download | string \| boolean | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| ping | string | - | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). |
| referrerPolicy | "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" | - | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
| routerOptions | undefined | - | Options for the configured client side router. |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| children | ChildrenOrFunction<LinkRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | ClassNameOrFunction<LinkRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<LinkRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| slot | string \| null | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |