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