Skip to main content

Pagination

Component status:Beta
An interface used to navigate between multiple pages of content.

Default Pagination#

The Default Pagination component is used to break up large sets of data across multiple pages. It is commonly used to navigate through items returned from a search or filtering operation.

<nav role="navigation" aria-label="Pagination" class="bux-pagination">
<ul class="bux-pagination__list">
<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--previous" href="#" aria-label="Go to previous page"></a>
</li>
<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 1">1</a>
</li>
<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 2">2</a>
</li>
<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--current" href="#" aria-label="Current page, page 3"aria-current="true">3</a>
</li>
<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 4">4</a>
</li>
<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 5">5</a>
</li>
<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>

Alternate Pagination#

An alternate pagination style with a more subtle hover effect.

<nav role="navigation" aria-label="Pagination" class="bux-pagination bux-pagination--alt">
<ul class="bux-pagination__list">

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--previous" href="#" aria-label="Go to previous page"></a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 1">1</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 2">
2
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--current" href="#" aria-label="Current page, page 3" aria-current="true">
3
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 4">
4
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 5">5</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>

Reverse Pagination#

Pagination for use on a dark background.

<nav role="navigation" aria-label="Pagination" class="bux-pagination bux-pagination--reverse">
<ul class="bux-pagination__list">

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--previous" href="#" aria-label="Go to previous page"></a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 1">1</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 2">
2
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--current" href="#" aria-label="Current page, page 3" aria-current="true">
3
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 4">
4
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 5">5</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>

Truncated Pagination#

Behavior of the pagination when there are more pages than can be displayed at one time.

<nav role="navigation" aria-label="Pagination" class="bux-pagination">
<ul class="bux-pagination__list">

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--previous" href="#" aria-label="Go to previous page"></a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 1">1</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 2">
2
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--current" href="#" aria-label="Current page, page 3" aria-current="true">
3
</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 4">
4
</a>
</li>

<li class="bux-pagination__item">
<span class="bux-pagination__link bux-pagination__link--truncated" aria-hidden="true"></span>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link" href="#" aria-label="Go to page 9">9</a>
</li>

<li class="bux-pagination__item">
<a class="bux-pagination__link bux-pagination__link--next" href="#" aria-label="Go to next page"></a>
</li>
</ul>
</nav>

Document Pagination#

The Document Pagination component is used for page-by-page navigation through content that is meant to be viewed in sequential order. It is often used for content such as books, manuals, or courses.

<nav role="navigation" aria-label="Pagination" class="bux-doc-pagination">
<div class="bux-doc-pagination__item bux-doc-pagination__item--prev">
<a href="link/to/prev-page" class="bux-doc-pagination__link bux-doc-pagination__link--prev" rel="prev" aria-label="Go to previous page">
<div class="bux-doc-pagination__label bux-doc-pagination__label--prev">Title of previous page</div>
</a>
</div>
<div class="bux-doc-pagination__item bux-doc-pagination__item--next">
<a href="link/to/next-page" class="bux-doc-pagination__link bux-doc-pagination__link--next" rel="next" aria-label="Go to next page">
<div class="bux-doc-pagination__label bux-doc-pagination__label--next">Title of next page</div>
</a>
</div>
</nav>