fin1te/dsv1.0.0
  1. ds
  2. Components
  3. Breadcrumbs and pager

Breadcrumbs and pager

Where you are and where to go next.

Breadcrumbs

Code
<nav aria-label="Breadcrumb">
  <ol class="crumbs">
    <li><a href="#">writing</a></li>
    <li><a href="#">rust</a></li>
    <li aria-current="page">spark-to-rust</li>
  </ol>
</nav>

Pager

Code
<nav class="pager" aria-label="More posts">
  <a class="prev" href="#"><span class="label">Previous</span><strong>ClickHouse sort keys</strong></a>
  <a class="next" href="#"><span class="label">Next</span><strong>The 497-day bug</strong></a>
</nav>

Used at the end of posts and on every page of this site.

Pages

Code
<nav class="pages" aria-label="Pages">
  <a href="#">1</a><a href="#" aria-current="page">2</a><a href="#">3</a><span>…</span><a href="#">9</a>
</nav>
ClassOnWhat it does
.crumbsolMono path with slashes.
.pagernavPrevious and next cards. .prev and .next on the links.
.pagesnavNumbered pages. aria-current on the current one.