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">…</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">…</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
.