Breadcrumb

現在地までの階層（サイト内の位置）をリンク列として示すパンくずナビゲーションです。fandhe-frontend-headless-ui の breadcrumb mod が構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを提供する unstyled 部品であり、Themes 版と異なりスタイル（CSS）は一切持ちません。末尾項目のみ非対話の current-link（aria-current="page"）として描画し、中間項目は ellipsis パーツで折り畳めます。

スタイル済みの表示例は Breadcrumb を参照してください。

アクセシビリティ

root の aria-label は省略時 "breadcrumb" が既定値になります（WAI-ARIA APG の Breadcrumb パターン準拠）。
末尾項目のみ current-link（非対話の span）として描画し、aria-current="page" + data-current を固定付与します（中間項目は link、遷移可能な a）。
separator/ellipsis はいずれも role="presentation" + aria-hidden="true" で装飾扱いとし、スクリーンリーダーの読み上げから除外します。
キーボード操作はネイティブ <a href>（link パーツ）のみに依存します（Tab/Shift+Tab でのフォーカス移動・Enter での遷移はブラウザ既定動作）。独自キーハンドラは持ちません。
参照実体は chakra-ui の Breadcrumb のみです（ark-ui には対応部品がなく、Radix Primitives / Radix Themes にも Breadcrumb は存在しません）。突合の結果、anatomy 7 パーツ・WAI-ARIA とも差分なしと確認しています（イシュー #1648）。WAI-ARIA APG は末尾項目も <a aria-current="page"> として残しますが、本実装は chakra-ui に倣い非対話 span とする意図的な差分です。data-current は link/nav_list/pagination と共有する本リポジトリ独自の data-* 語彙です。shadcn/ui BreadcrumbPage の role="link" + aria-disabled="true" は §8-4（参照軸方針）と WAI-ARIA APG の観点から不採用と判断しています（イシュー #2182）。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Features

パンくずナビゲーション。root（nav）/ list（ol）/ item（li）/ link（a）/ current-link（span）/ separator（li）/ ellipsis（li）の 7 anatomy パーツを持つ（breadcrumb.rs モジュール doc）。
末尾項目のみ current_link（非対話の span、aria-current="page"+data-current 固定付与）として描画し、それ以外は link（a、href 遷移可能）として描画する利便ビルダー breadcrumb() を提供する。
separator/ellipsis はいずれも role="presentation"+aria-hidden="true" で装飾扱いとし、スクリーンリーダーの読み上げから除外する（separator/ellipsis 関数）。
root の aria-label は省略時 "breadcrumb"（DEFAULT_ARIA_LABEL）が既定値になる。
参照実体は chakra-ui の Breadcrumb のみ（ark-ui/Radix Primitives/Radix Themes に対応部品なし）。anatomy 7 パーツ・WAI-ARIA とも一致し差分なし。data-current は本リポジトリが link/nav_list/pagination と共有する独自語彙（イシュー #1648 参照突合）。
shadcn/ui BreadcrumbPage の role="link"+aria-disabled="true" は §8-4（参照軸方針）と WAI-ARIA APG（非リンクの現在ページ要素を許容）の観点から不採用と判断した（イシュー #2182、根拠は breadcrumb.rs モジュール doc）。

Anatomy

root
  list
    item
      link
    separator
    ellipsis
      current-link

API Reference

Arguments

Name	Type	Default	Description
`root(aria_label_value)`	`Option<&str>`	—	None のとき既定値 "breadcrumb" を aria-label へ出力する。
`current_link`	`fn`	—	aria-current="page"+data-current を常に付与する span パーツ（末尾項目用）。
`breadcrumb(items)`	`&[BreadcrumbItem]`	—	label/href の組から nav > ol > (li + li)* を決定的に組み立てる利便ビルダー。空配列でも panic しない。
`separator(children)`	`Vec<Node>`	—	区切り表現は呼び出し側が children で与える（固定文言を持たず、"/"/"›" 等を自由に選べる）。

Data Attributes

Part	Attribute	Observed Values
`current-link`	`data-current`	（値なし）

Examples

利便ビルダー + カスタム separator

breadcrumb() 利便ビルダーへ separator_children で "›" を渡す構成です。

自前 CSS の最小例

data-scope / data-part / data-current 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。

CSS

[data-scope="breadcrumb"][data-part="list"] {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
[data-scope="breadcrumb"][data-part="link"] {
  color: #2563eb;
  text-decoration: none;
}
[data-scope="breadcrumb"][data-part="link"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
[data-scope="breadcrumb"][data-part="current-link"][data-current] {
  color: #111827;
  font-weight: 600;
}
[data-scope="breadcrumb"][data-part="separator"],
[data-scope="breadcrumb"][data-part="ellipsis"] {
  color: #6b7280;
}

Accessibility

Keyboard Interactions

Key	Description
Tab / Shift+Tab	ネイティブ a 要素（link パーツ）由来のフォーカス移動。current-link（span）は非対話でフォーカス対象外。独自キーハンドラは持たない（参照サイトにもキーボード操作表はない）。
Enter	フォーカス中の link（a）をブラウザ既定動作で遷移する。

WAI-ARIA

Attribute	Description
aria-label="breadcrumb"	root の既定値（省略可能、WAI-ARIA APG "Breadcrumb" と同義）。
aria-current="page"	current_link に固定付与（末尾項目の非対話 span）。role="link"/aria-disabled="true"（shadcn/ui BreadcrumbPage 相当）は意図的に付与しない（イシュー #2182）。
role="presentation" / aria-hidden="true"	separator/ellipsis に固定付与し装飾要素として扱う。