パンくずリスト

解説

パンくずリストは、サイトのどの階層を見ているかを「ホーム ＞ 一覧 ＞ 現在地」のように示すナビゲーション部品です。実装はとても軽く、nav の中にリンクと現在地のテキストを並べ、各リンクの後ろに ::after の疑似要素で区切り記号を差し込んでいます。現在地だけは色を薄くしてリンクと区別し、今いる場所が直感的に分かるようにしています。JavaScript は不要で、CSS だけで成立します。

役立つ場面

• カテゴリが深い通販サイトやブログの記事ページ
• ヘルプやドキュメントなど階層が多い情報サイト
• 戻り先を分かりやすくしたい管理画面の詳細ページ

区切り記号は ::after の content を書き換えれば、スラッシュや矢印など好きな形にできます。色や文字サイズも CSS の数値を変えるだけで調整可能です。検索エンジンにも階層を伝えられるよう、nav に aria-label を付け、現在地には aria-current を添えると、読み上げ環境でも今の位置が正しく伝わります。リンクには実際の遷移先を指定して、迷子になっても上の階層へ戻れる導線にしましょう。

使用例・適したシーン

• コーポレートサイトのグローバルナビ
• EC サイトのヘッダー
• SaaS の管理画面
• モバイル向け Web アプリ