Breadcrumbs
現在のページの階層上の位置を示すナビゲーショントレイルです。
主なプロパティ
項目はデータとして渡します。最後の項目は href を受け取らず、クリックできないプレーンテキストとして描画され aria-current="page" を持ちます。renderLink はコンポーネントをルーティング状態に結合せず、ルーター要素を注入します。
| プロパティ | 説明 |
|---|---|
| 現在のページ | 最後の項目はリンクではなくテキストとして描画され aria-current="page" を持ちます |
| 区切り | 最後の項目を除くすべての項目の間に描画され、支援技術からは隠されます |
| ルーティング | renderLink(item, index) はアンカーを入れ子にせずルーターリンクを合成します |
| 空の状態 | items が空配列の場合、何も描画しません |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/breadcrumbs.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRBreadcrumbs } from '@tinyrack/ui/components/breadcrumbs';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
周囲のデザインに合わせて、既定のスラッシュの代わりに山括弧などの separator を渡せます。
API
items は { label, href? }[] を受け取ります。href を省略すると(最後の項目は常に省略)、リンクではなくプレーンテキストとして描画されます。separator は任意の ReactNode を受け取り、既定値は / です。ランドマークのアクセシブル名は label で設定でき、既定値は Breadcrumb です。renderLink は項目とインデックスを受け取り、アンカーを入れ子にせずに React Router などのクライアントルーターを合成します。
ルートはネイティブの nav 属性、className、style、イベント、React 19 の ref を保持します。スタイルは Tinyrack のセマンティックカラー、間隔、タイポグラフィトークンを使用します。