ナビ・リスト操作
パンくずリスト
「ホーム › カテゴリ › … › 現在地」と階層をたどれるパンくず。最後の項目は現在地として aria-current で示し、リンクにはしない。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
最後の項目だけ <a> ではなく aria-current="page" を付けた <span> にし、現在地はリンクにしないのが定石です。区切りの › は装飾なので各 <li class="bc-sep"> に aria-hidden="true" を付け、読み上げ時に読まれないようにしています。項目が多いときは中間を「…」に畳んでも構いません。
コード（コピーして使えます）
<nav class="bc" aria-label="パンくずリスト">
<ol class="bc-list">
<li class="bc-item">
<a class="bc-link" href="#">
<svg class="bc-home" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/></svg>
ホーム
</a>
</li>
<li class="bc-sep" aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><polyline points="4,2 8,6 4,10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</li>
<li class="bc-item"><a class="bc-link" href="#">レディース</a></li>
<li class="bc-sep" aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><polyline points="4,2 8,6 4,10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</li>
<li class="bc-item"><a class="bc-link" href="#">バッグ</a></li>
<li class="bc-sep" aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><polyline points="4,2 8,6 4,10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</li>
<li class="bc-item"><span class="bc-current" aria-current="page">トートバッグ</span></li>
</ol>
</nav>