ピル型パンくず
ピル型パンくずは、各階層を角丸の薄い背景で囲んでボタンのように見せたパンくずリストです。 <nav aria-label="パンくず"> の中に <ol> で階層を並べ、区切りには ::after で「›」記号を差し込んでいます。
このパーツの使いどころと実装ポイント
ピル型パンくずは、各階層を角丸の薄い背景で囲んでボタンのように見せたパンくずリストです。<nav aria-label="パンくず"> の中に <ol> で階層を並べ、区切りには ::after で「›」記号を差し込んでいます。最後の現在地だけ <span> でリンクにせず、たどってきた経路と今いる場所を見分けやすくしています。先頭のHomeにはインラインSVGアイコンを添えています。
向いている場面
- カテゴリ階層が深いECサイト
- 商品やサービスを分類で辿る企業サイト
- 現在地を強調したい会員ページやサポート
固有の勘所は、ピルが横に並ぶため階層が深いと折り返すこと。flex-wrap が効いているので2行になっても崩れませんが、長すぎる場合は中間階層を省略表示にする工夫が有効です。
実装上の注意
パンくずは検索エンジンにも階層を伝える要素なので、各リンクに正しい遷移先を設定します。区切りの記号はCSSの装飾で出しているため、読み上げ環境には伝わらない前提です。aria-label でナビゲーションだと示し、現在地は aria-current="page" を添えるとより正確に伝わります。スマートフォンでは1行に収まらないことを想定して余白を詰めすぎないことも大切です。
よくある質問
区切りの記号は文字として入っていますか
いいえ。CSSの擬似要素でvisualに足しているため、コピーしても本文には含まれず、読み上げ環境にも基本的に読まれません。階層の意味はリストの構造とリンク文言で伝わります。
階層が深くて折り返してしまいます
flex-wrapで2行になっても崩れませんが、見栄えを優先するなら中間の階層を省略記号でまとめる、または余白を詰めて1行に収める調整をします。現在地は必ず残してください。