UI Component Labナビゲーション
Breadcrumb パンくずリスト（パンくずナビゲーション）
今のページの上の階層にあるページへのリンクを、階層順に並べたもの。
デモ
別名
- パンくずナビゲーション — デジタル庁デザインシステム
見分けるポイント
「/」や「>」で区切った短いページ名が1行に並び、多くはページタイトルの上にある。最後の名前は今のページで、リンクの見た目にはならない。
挙動
- 最後以外の名前は、それぞれの階層のページへのリンクになっている。
- 今のページは aria-current="page" で示す。
- このデモのリンクは移動せず、移動先を表示するだけにしている。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | リンク間を移動する。 |
| Enter | フォーカス中のリンク先へ移動する。 |
使い分け・注意点
- ヘッダーとページの見出しの間に置く。
- 狭い画面では、横にスクロールさせず折り返して表示する。
出典
- WAI-ARIA APG: Breadcrumb Pattern (最終確認日: )
- デジタル庁デザインシステムウェブサイト「パンくずナビゲーション」をもとに作成 (最終確認日: )