Navigation Elements: Pagination
For content that span multiple pages (e.g., collection items, catalog items). Arrows are added via CSS for easy customization.
<nav class="nav nav--pagination" aria-label="Pagination"> <ul> <li> <span class="nav--pagination__prev"></span> </li> <li> <span class="nav--pagination__here" aria-label="Current Page, Page 1" aria-current="true">1</span> </li> <li> <a href="page.html" aria-label="Go to page 2">2</a> </li> <li> <a href="page.html" aria-label="Go to page 3">3</a> </li> <li> <a href="page.html" aria-label="Go to page 4">4</a> </li> <li> <a href="page.html" aria-label="Go to page 5">5</a> </li> <li> <a href="page.html" aria-label="Go to page 6">6</a> </li> <li> <a href="page.html" aria-label="Go to page 7">7</a> </li> <li> <a href="page.html" aria-label="Go to page 8">8</a> </li> <li> <a href="page.html" aria-label="Go to page 9">9</a> </li> <li> <span class="nav--pagination__spread"></span> </li> <li> <a href="page.html" aria-label="Go to page 19">19</a> </li> <li> <a href="page.html" class="nav--pagination__next" aria-label="Go to next page"></a> </li> </ul> </nav>