矢印型パンくずリスト
各階層の区切りに小さな矢印（チェブロン）が入る、シャープな印象のパンくずリストです。マークアップは nav の中に ol を置き、各階層を li で表す、検索エンジンにも理解されやすいセマンティックな構造です。
解説
各階層の区切りに小さな矢印（チェブロン）が入る、シャープな印象のパンくずリストです。マークアップは nav の中に ol を置き、各階層を li で表す、検索エンジンにも理解されやすいセマンティックな構造です。区切り記号はテキストではなく li + li::before の疑似要素で content: "›" として差し込んでいるため、リストのデータそのものを汚さずに見た目だけ整えられます。現在地のページには aria-current="page" を付けて、補助技術にも今いる位置を伝えます。
使いどころ
- 階層の深い SaaS 管理画面の、現在位置を示すナビ
- カテゴリから商品へとたどる EC の商品詳細ページ
- サービス紹介や料金など、階層構造を持つコーポレートサイト
区切り記号は ::before の content を変えれば矢印以外（/ など）にもできます。リンクのホバー色や現在地の色は CSS を編集して調整します。区切りの記号を本物のテキストとして書かない のがポイントで、疑似要素にしておくとコピーや読み上げで余計な文字が混ざりません。階層が深くなりすぎる場合は中間を省略表示し、長い項目名は折り返しや省略を検討すると、モバイルでも崩れにくくなります。
使用例・適したシーン
- 記事の階層表示
- EC 商品ページ
- SaaS の設定画面
よくある質問
区切りの矢印を別の記号に変えられますか？
CSS の .bc-arrow li+li::before にある content: "›" の中身を書き換えるだけで変えられます。スラッシュにしたいなら "/"、別の矢印にしたいなら好きな記号に差し替えてください。区切りは疑似要素で描いているので、HTML 側のリスト項目を編集する必要はありません。
なぜ区切り文字をテキストで書かないのですか？
区切りを ::before の疑似要素で描くと、パンくずのデータ（各階層のリンクテキスト）を汚さずに見た目だけ整えられます。ユーザーがテキストをコピーしたときや、スクリーンリーダーが読み上げるときに、矢印などの装飾記号が混ざらないという利点もあります。