Pagination

Responsive pagination for your list pages. This component is also really flexible. Want Previous and Next buttons? Want ellipses? Want it in the middle or on the right? Kriyā pagination has you covered.

<nav class="pagination" aria-label="Pagination Navigation">
	<a href="" aria-label="Go to previous page" class="pagination-previous" rel="prev" disabled>Previous</a>
	<a href="" aria-label="Go to next page" class="pagination-next" rel="next">Next page</a>
	<ul class="pagination-list">
		<li><a href="" aria-label="Current Page, Page 1" aria-current="true" class="pagination-link is-current">1</a></li>
		<li><a href="" aria-label="Go to page 2" class="pagination-link">2</a></li>
		<li><a href="" aria-label="Go to page 3" class="pagination-link">3</a></li>
	</ul>
</nav>

Ellipses

Add some ellipses to your pagination.

<nav class="pagination" aria-label="Pagination Navigation">
	<a href="" aria-label="Go to previous page" class="pagination-previous" rel="prev">Previous</a>
	<a href="" aria-label="Go to next page" class="pagination-next" rel="next">Next page</a>
	<ul class="pagination-list">
		<li><a href="" aria-label="Go to page 1" class="pagination-link">1</a></li>
		<li><span class="pagination-ellipsis">&hellip;</span></li>
		<li><a href="" aria-label="Current Page, Page 8" aria-current="true" class="pagination-link is-current">8</a></li>
		<li><a href="" aria-label="Go to page 9" class="pagination-link">9</a></li>
		<li><a href="" aria-label="Go to page 10" class="pagination-link">10</a></li>
		<li><span class="pagination-ellipsis">&hellip;</span></li>
		<li><a href="" aria-label="Go to page 38" class="pagination-link">38</a></li>
	</ul>
</nav>

Alignment

Prefer your pagination in the middle or on the right? Just add the modifier is-centered or is-right to pagination.