パンくずリスト／Breadcrumb

パンくずリストを表示するコンポーネントです。

<div class="c-breadcrumb">
  <nav class="c-breadcrumb__nav">
    <ol class="c-breadcrumb__list">
      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="/">トップページ</a>
      </li>

      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="/page1">上位階層</a>
      </li>

      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="/page1">上位階層</a>
      </li>

      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="/page1">上位階層</a>
      </li>

      <li class="c-breadcrumb__item">
        <span class="c-breadcrumb__text" aria-current="page">現在のページ</span>
      </li>
    </ol>
  </nav>
</div>

原則

グローバルフッターナビゲーションに内包されるパーツであり、最上部に表示します。
Science Tokyo のWebサイトではパンくずリスト単独での利用は想定していません。