Pagination

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


Component Code
<!-- is-current highlights the currently selected page -->
<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 page</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


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