Pagination
Pagination allows you to break up content that doesn't fit on a single page.
Class | Type | |
---|---|---|
pagination
|
Pagination | A class representing pagination |
<nav class="pagination">
<span href="" class="button is-text is-disabled" aria-label="prev page">
<span class="icon-cheveron-left" aria-hidden="true"></span>
<span class="text">Prev</span>
</span>
<ol class="pagination-list is-only-desktop">
<li class="pagination-item">
<span href="" class="button is-disabled" aria-label="page"><span class="text">1</span></span>
</li>
<li class="pagination-item">
<button class="button is-text /*u-hide*/" aria-label="show prev 5 pages">
<span class="icon">…</span>
</button>
</li>
<li class="pagination-item">
<button class="button is-text" aria-label="page"><span class="text">2</span></button>
</li>
<li class="pagination-item">
<button class="button is-text" aria-label="page"><span class="text">3</span></button>
</li>
<li class="pagination-item">
<button class="button is-text" aria-label="page"><span class="text">4</span></button>
</li>
<li class="pagination-item">
<button class="button is-text" aria-label="page"><span class="text">5</span></button>
</li>
<li class="pagination-item">
<button class="button is-text" aria-label="show next 5 pages">
<span class="icon">…</span>
</button>
</li>
<li class="pagination-item">
<button class="button is-text" aria-label="page"><span class="text">20</span></button>
</li>
</ol>
<a href="" class="button is-text" aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true"></span>
</a>
</nav>
Best Practice
Tips to keep in mind while using pagination:
Do
Use pagination to help users find information within a table containing a large amount of data.
Don't
Make your user click through multiple pages to find what they need.