Breadcrumb

fandhe-frontend-pre-styled-ui の breadcrumb mod が提供するスタイル済み Breadcrumb 部品です。

現在位置までの階層を示すナビゲーション部品です。root は既定で aria-label="breadcrumb" を持ち、現在ページには aria-current="page" が付与されます。ページ内の段階的な進行を示す用途には Steps を検討してください。

区切り文字は separator() が受け取る children で自由に差し替えられます（/ 以外にも ›・·・SVG アイコン等を渡すだけで対応可能で、recipe/CSS の変更は不要です）。中間項目を省略して表示したい場合は item() の中に Menu を配置し、trigger の表示文字列を省略記号（"…"）にすることで、クリックすると省略された項目の一覧をドロップダウン表示するパターンを構築できます（ellipsis() は装飾専用の非対話 <li> 固定で trigger の子にはできないため使いません。Demo の 2 つ目・3 つ目の掲示を参照）。

項目間の余白（list の gap）はビューポート幅 640px 以上で --fandhe-space-1-5（0.375rem）から --fandhe-space-2-5（0.625rem）へ自動的に広がります（shadcn/ui の sm:gap-2.5 相当）。上書きしたい場合は [data-scope="breadcrumb"][data-part="list"] セレクタの gap を利用者側 CSS で指定してください。

Demo

headless-ui の Breadcrumb（nav[aria-label="breadcrumb"] + ol/li）に pre-styled-ui の recipe CSS を適用した静的掲示です。末尾項目のみ aria-current="page"/data-current を持つ非対話の現在位置表示（span）として描画します。2 つ目は separator の children を差し替えたカスタム区切り文字（"›"）の例、3 つ目は breadcrumb::item 内に Menu 部品（trigger の表示文字列を省略記号 "…" にしたもの）を配置し、省略項目のドロップダウン展開を合成した例です（イシュー #2027、shadcn/ui 突合。既存 API のみで実現でき headless-ui 側の変更は不要でした）。

Features

BreadcrumbVariant（Plain/Underline、crates/pre-styled-ui/src/breadcrumb.rs:266-272）でリンクの下線表示を切り替える
root は既定で aria-label="breadcrumb" を付与する（breadcrumb.rs:152-154）
current_link は aria-current="page"、separator は role="presentation" を固定付与する（breadcrumb.rs:184-188）
list の gap は既定 --fandhe-space-1-5（0.375rem）、ビューポート幅 640px 以上（recipe::Breakpoint::Sm）で --fandhe-space-2-5（0.625rem）へ広がる（イシュー #2198、breadcrumb.rs recipe() 参照）

Anatomy

root
  list
    item
      link
    separator
      current-link

API Reference

Arguments

Name	Type	Default	Description
`variant`	`BreadcrumbVariant`	`Plain`	リンクの下線表示（breadcrumb.rs:266-272）。
`aria_label_value`	`Option<&str>`	`None`	None の場合は既定値 "breadcrumb" を使う（breadcrumb.rs:122-134, 152-154）。

Data Attributes

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

CSS Variables

Variable	Default
`--fandhe-breadcrumb-font-size`	`var(--fandhe-font-font-size-md)`
`--fandhe-breadcrumb-link-text-decoration`	`none`

Examples

Two levels

Docs → Components の 2 階層パンくずの例です。

Responsive gap

4 階層のパンくず。ビューポート幅 640px 以上で項目間の余白が広がります（@media (min-width: 640px)、イシュー #2198）。

Accessibility

WAI-ARIA

Attribute	Description
aria-label="breadcrumb"（root、既定値）	root へ既定で付与される（breadcrumb.rs:122-134, 152-154）。
aria-current="page"（current_link） / role="presentation"（separator）	現在ページと区切り記号に付与される（breadcrumb.rs:184-188）。