Pagination

Ready Added in 2.0.0

Easily create a nice looking pagination to navigate through pages.

Usage

The Pagination component consists of button-like styled links, that are aligned side by side in a horizontal list.

Class Description
.gls-pagination Add this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list.
.gls-active Add this class to a list item to apply an active state and use a <span> instead of an <a> element.
.gls-disabled Add this class to a list item to apply a disabled state and use a <span> instead of an <a> element. 
<ul class="gls-pagination">
    <li><a href=""></a></li>
    <li class="gls-active"><span></span></li>
    <li class="gls-disabled"><span></span></li>
</ul>

  • <ul class="gls-pagination" gls-margin>
    <li><a href="#"><span gls-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
    <li class="gls-disabled"><span>...</span></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="gls-active"><span>7</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li class="gls-disabled"><span>...</span></li>
    <li><a href="#">20</a></li>
    <li><a href="#"><span gls-pagination-next></span></a></li>
</ul>

Guidelines

When to use

Use when a user’s action returns a large data set such as search results, or a large number of rows in a data table to break results into multiple pages to help with load times.

When to consider something else

With smaller amounts of data consider displaying the whole data set in one page that users can scroll through instead of breaking it into pages.

Accessibility

The pagination component is wrapped in a nav element so that it is announced to assistive technologies. Use an aria-label attribute to describe the purpose of your pagination. This will help assistive technologies distinguish between navigation sections on pages that use more than one nav element.

Accessible dynamic pagination

This article on a11ymatters.com has some really good tips on implementing dynamic aria-label(s) on pagination items based on how many pages are returned.

Alignment

The pagination component utilizes flexbox, so navigations can easily be aligned with the Flex component.

<ul class="gls-pagination gls-flex-center">...</ul>

  • <ul class="gls-pagination gls-flex-center" gls-margin>
    <li><a href="#"><span gls-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
    <li class="gls-disabled"><span>...</span></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="gls-active"><span>7</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#"><span gls-pagination-next></span></a></li>
</ul>

<ul class="gls-pagination gls-flex-right gls-margin-medium-top" gls-margin>
    <li><a href="#"><span gls-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
    <li class="gls-disabled"><span>...</span></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="gls-active"><span>7</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#"><span gls-pagination-next></span></a></li>
</ul>

Previous and next

To apply a previous and next button, add the gls-pagination-previous or gls-pagination-next attribute to a <span> element inside a pagination item.

<ul class="gls-pagination">
    <li><a href=""><span gls-pagination-previous></span></a></li>
    <li><a href=""><span gls-pagination-next></span></a></li>
</ul>

  • <ul class="gls-pagination">
    <li><a href="#"><span class="gls-margin-small-right" gls-pagination-previous></span> Previous</a></li>
    <li class="gls-margin-auto-left"><a href="#">Next <span class="gls-margin-small-left" gls-pagination-next></span></a></li>
</ul>