Breadcrumb パンくず · kf-crumbs
今いる場所の階層。3 階層以上の画面にだけ置く。
HTML
<nav aria-label="現在地"><ol class="kf-crumbs">
<li><a href="#">ホーム</a></li>
<li><a href="#">一覧</a></li>
<li><span aria-current="page">項目 B</span></li>
</ol></nav>ol.kf-crumbsにli。区切りの「/」は CSS が出す。最後はspan aria-current="page"。- 題(
h1)の上に置く。ヘッダの切り替え(1 階層目)と重複する部分は省いてよい。 - 文字は 13px、
ink-muted。現在地だけink-strong。 - 4 階層を超えるなら途中を省かず、画面の設計を見直す。