Navigation / What comes next
Pagination
Name the next destination before the reader needs to click it.
Basic usage
HTML
<nav class="pager" aria-label="Related components">
<a class="pager-prev" href="../tree/"><span class="pager-dir">Previous</span><span class="pager-name">Tree — Navigate a hierarchy</span></a>
<a class="pager-next" href="../tabs/"><span class="pager-dir">Next</span><span class="pager-name">Tabs — Switch between views</span></a>
</nav>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.pager / .pager-prev / .pager-next | Previous and next destinations. |
.pager-dir / .pager-name | The direction and the destination name. |
.pages / .is-current / .pages-gap | Numbered pagination, the current page, and an omitted range. |
Usage notes
Say where the link goes, not only “Next”. Give the current page aria-current="page".
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.