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