Pagination

Overview

Pagination helps to break down long lists into multiple sections that are indexed by a pagination component.

<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>

When you should use this component

You should use the pagination component when you want to display large amounts of related content that spans across multiple pages. E.g Search results or forum posts.

When you should consider something else

You should not use the pagination component to indicate progress, such as in a transaction.

You should also not use the component as a replacement for navigation. For main navigation, do use the main nav and side nav components


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>

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>

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>

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

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team