§05-06Search & Navigation
breadcrumb
現在地までの階層をリンクの列で示す。
深い階層の中で自分の位置を把握でき、上の階層へ一度で戻れる。カテゴリが多いドキュメントやストアで、迷子を防ぎたいときに使う。
実装のポイント
nav に aria-label=「パンくず」、ol でリスト化し、現在地には aria-current=「page」を付ける。長い階層は中間を省略記号に畳む。
- 特徴
- アクセシビリティ
- デモで使っているもの
- lucide-react
§05-06Search & Navigation
現在地までの階層をリンクの列で示す。
深い階層の中で自分の位置を把握でき、上の階層へ一度で戻れる。カテゴリが多いドキュメントやストアで、迷子を防ぎたいときに使う。
nav に aria-label=「パンくず」、ol でリスト化し、現在地には aria-current=「page」を付ける。長い階層は中間を省略記号に畳む。