Pagination

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