Breadcrumb
パンくずリスト。いまいる場所と、そこまでの階層を示す
<Breadcrumb>
<BreadcrumbItem href="/">ホーム</BreadcrumbItem>
<BreadcrumbItem href="/docs">ドキュメント</BreadcrumbItem>
<BreadcrumbItem>はじめに</BreadcrumbItem>
</Breadcrumb>区切り記号は Breadcrumb が入れます
Breadcrumb が項目のあいだに入れます。 書く必要はありません。
自分で <BreadcrumbSeparator /> を並べる形にしていないのは、
読み上げから隠す指定を付け忘れられるからです。忘れても見た目は変わらないので、
読み上げが「スラッシュ」を項目の数だけ読む状態が黙って残ります。
形だけは変えられます。
<Breadcrumb separator="›">…</Breadcrumb>先頭には出ません。 あいだにしか入らないので、記号が浮くことがありません。
現在地の指定も Breadcrumb が付けます
末尾がいま居る場所です。 パンくずの形がそう決めているので、
aria-current="page" は Breadcrumb が付けます。
書かせる形にすると、階層を組み替えたときに付け替え忘れます。 見た目には出ないので、そのまま残ります。
<BreadcrumbItem href="/docs">ドキュメント</BreadcrumbItem>
<BreadcrumbItem>はじめに</BreadcrumbItem> {/* ← ここに付きます */}末尾に href を渡してもかまいません。リンクのまま現在地であることを示します。
行き先が無ければリンクになりません
href を渡さなかった項目は文字だけになります。
押せるように見えて何も起きないものを作りません。
長いときは折り返します
畳みません。 … で途中を省く形は持っていません。
省くとなると、どれを畳むかを Breadcrumb が決めることになります。どの階層を省けるかは、 その階層を作った側にしか分かりません。 畳んだ先を開く仕掛けも要ります。
幅が足りないときは折り返します。
好きなリンクコンポーネントに差し替えられます
Link を使っているときは asChild を渡してください。
枠を1つも作らず、名前と現在地の申告が子へ移ります。
<BreadcrumbItem asChild>
<Link href="/docs">ドキュメント</Link>
</BreadcrumbItem>3つの状態
通常・空・エッジケースの3つは、どのコンポーネントにも必ずあります。
通常default.tsx
通常。区切りは書かない。Breadcrumb が入れる。
空empty.tsx
空。いま居る場所しか無いとき。
エッジケースedge.tsx
エッジケース。階層が深いとき・区切り記号の差し替え・要素の差し替え。
props
Prop
Type
型と説明はコンポーネントのソースから抽出しています。既定値は出していません——cva の defaultVariants は 署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。