矢印付きパンくず
これは現在地までの階層を「ホーム ＞ カテゴリ ＞ 商品名」のように一列で示すパンくずナビです。区切り記号には角ばった矢印ではなく丸みのある › を使い、リンク部分はグレー、最後の現在ページだけ 濃色＋太字 にして、いまどこにいるかを一目で分からせています。
解説
これは現在地までの階層を「ホーム ＞ カテゴリ ＞ 商品名」のように一列で示すパンくずナビです。区切り記号には角ばった矢印ではなく丸みのある › を使い、リンク部分はグレー、最後の現在ページだけ 濃色＋太字にして、いまどこにいるかを一目で分からせています。
JavaScript は使わず CSS だけで完結します。display:inline-flex と gap で要素を等間隔に並べ、flex-wrap を効かせているので、階層が長くてもスマートフォンの狭い幅で自然に折り返します。リンクには transition が入っており、マウスを乗せると色がふわっと変わります。
使う場面とカスタマイズ
- 商品ページが深い EC サイトの現在地表示
- 設定項目が枝分かれする管理画面
- カテゴリ階層を持つブログやドキュメント
区切りの色は .bc span の color、最後の項目の見た目は .bc b で調整できます。検索エンジン向けには各リンクを実際の a href にし、構造化データの BreadcrumbList を併用すると、検索結果にパンくずが表示されやすくなります。読み上げ環境のために、外側をナビ要素として扱う点も大切です。
使用例・適したシーン
- 記事の階層表示
- EC 商品ページ
- SaaS の設定画面
よくある質問
区切り記号を矢印以外に変えられますか
はい。HTML の span に書かれた文字を差し替えるだけで、スラッシュやドット、別の矢印記号などに自由に変更できます。色は CSS の .bc span の color で調整します。
JavaScript は必要ですか
不要です。レイアウトも色変化もすべて CSS だけで動くため、そのまま貼り付けて使えます。リンク先を設定する場合は a タグに href を入れるだけで十分です。