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>