Breadcrumb

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

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

Demo

headless-ui の Breadcrumb（nav[aria-label="breadcrumb"] + ol/li）に pre-styled-ui の recipe CSS を適用した静的掲示です。末尾項目のみ aria-current="page"/data-current を持つ非対話の現在位置表示（span）として描画します。

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）

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 階層パンくずの例です。

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）。