とほほのBootstrap 4入門 - パンくずリスト

.breadcrumb, .breadcrumb-item は、パンくずリストを表示します。.active は現在のページを示します。aria-label は読み上げブラウザ等のためのラベル情報を提供します。 aria-current は現在のページ位置を示します。

Sample

Code

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>