SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Overview

Pagination controls provide swift access to all pages, while indicating that more pages exist.


Usage

Long lists are broken down into multiple sections by pagination.

<nav class="sgds-pagination" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous">Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next</a>
</nav>

Types

1) Disabling the button

You can disable some links if they are not active by adding a disabled attribute

<nav class="sgds-pagination is-right" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous" disabled>Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next</a>
</nav>

2) Alignments

You can align the pagination buttons using the is-centered & is-right classes

is-centered
<nav class="sgds-pagination is-centered" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous" disabled>Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next</a>
</nav>
is-right
<nav class="sgds-pagination is-right" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous" disabled>Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next</a>
</nav>

3) Rounded Pagination buttons

You can use .is-rounded to make all pagination buttons rounded.

<nav class="sgds-pagination is-rounded" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous">Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next</a>
</nav>

4) Customisable buttons

You can nest icons instead of text in the previous and next buttons by nesting child elements within the a tags.

<nav class="sgds-pagination" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous">
        <span class="sgds-icon sgds-icon-arrow-left is-size-5"></span>
    </a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link">1</li>
        <li class="sgds-pagination-link is-current">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">
        <span class="sgds-icon sgds-icon-arrow-right is-size-5"></span>
    </a>
</nav>

Style

Modifier Description
is-centered Align pagination buttons in the center
is-right Align pagination buttons to the right
is-rounded Rounds the buttons of the pagination links

When to use

Pagination should be used for:
  • Displaying large amounts of related content that spans across multiple pages.
    • For example, search results or forum posts.
Pagination should not be used for:
  • Indicating progress, such as in a transaction.
  • Replacing Navigation.
    • For main navigation, you are advised to use the main nav and side nav components.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component