Skip links and keyboard navigation

For government has transitioned to using the Queensland Government design system. If you have feedback, please use the form at the bottom of this page.

Learn more

SWE components

Pagination

Overview

Use pagination to indicate a series of related content exists across multiple pages.

Default

  • Add the classes qg-previous and qg-next to the previous and next buttons.
  • Refer to the Bootstrap pagination documentation for more implementation information.
  • A parent <div> with a class of pagination-container is required on each pagination instance for Google Analytics tracking.

View example in Storybook

Code

<div class="pagination-container">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> Previous</a></li>
            <li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"> <a class="page-link" href="#">Next <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
        </ul>
    </nav>
</div>

<div class="pagination-container">
    <nav aria-label="Page navigation example">
        <ul class="pagination flex-wrap">
            <li class="page-item disabled"><a class="page-link" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item active"><a class="page-link" href="#">5 <span class="sr-only">(current)</span></a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item"><a class="page-link" href="#">7</a></li>
            <li class="page-item"><a class="page-link" href="#">8</a></li>
            <li class="page-item"><a class="page-link" href="#">9</a></li>
            <li class="page-item"><a class="page-link" href="#">10</a></li>
            <li class="page-item"> <a class="page-link" href="#">Next <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
        </ul>
    </nav>
</div>

<div class="pagination-container">
    <nav aria-label="Page navigation example">
        <ul class="pagination flex-wrap">
            <li class="page-item"><a class="page-link" href="#"><span class="fa fa-angle-left" aria-hidden="true"></span> Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(current)</span></a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item disabled"><a class="page-link" href="#">Next <span class="fa fa-angle-right" aria-hidden="true"></span></a>
            </li>
        </ul>
    </nav>
 </div>
Last updated:
28 June 2024