Pagination

Pagination links allows users to navigate a set of content that is divided between multiple pages or views. This pattern is typically used when a large set of results requires to be split for performance reasons, or when the ability to access a specific listings page is a user requirement.

Rules for pagination

Pagination must be used on search results and tables which have multiple pages, for example, DataTables.
Pagination must have a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
As pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for each <nav> block to reflect its purpose.
Links are customisable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Options available

Pagination
Pagination with disabled and active states
Pagination with large number of pages
Compact pagination
Pager
Pager with disabled state

Pagination

Where space permits the 'Next' and 'Previous' button text should be shown alongside the arrows.

Example

Code

<nav aria-label="Pagination">
    <ul class="pagination pagination-lg">
        <li><a href="#" role="button"><span aria-hidden="true">&laquo;</span><span> Previous</span></a></li>
        <li><a href="#" role="button">1</a></li>
        <li><a href="#" role="button">2</a></li>
        <li class="active"><a href="#" role="button">3</a></li>
        <li><a href="#" role="button">4</a></li>
        <li><a href="#" role="button">5</a></li>
        <li><a href="#" role="button"><span>Next </span><span aria-hidden="true">&raquo;</span></a></li>
</nav>

Pagination with disabled and active states

Disabled links should be used when there is no preceeding or following pages to navigate to.

Example

Code

<nav aria-label="Pagination with disabled and active states">
    <ul class="pagination pagination-lg">
        <li class="disabled"><a tabindex="-1" aria-disabled="true" href="#" role="button"><span aria-hidden="true">&laquo;</span><span> Previous</span></a></li>
        <li class="active"><a href="#" role="button">1</a></li>
        <li><a href="#" role="button">2</a></li>
        <li><a href="#" role="button">3</a></li>
        <li><a href="#" role="button">4</a></li>
        <li><a href="#" role="button">5</a></li>
        <li><a href="#" role="button"><span>Next </span><span aria-hidden="true">&raquo;</span></a></li>
</nav>

Pagination with large number of pages

When there is a large amount of pages … should be used to signify any page links that are not immediately displayed.

Example

Code

<nav aria-label="Pagination with large number of pages">
    <ul class="pagination pagination-lg">
        <li class="disabled"><a tabindex="-1" aria-disabled="true" href="#" role="button"><span aria-hidden="true">&laquo;</span><span> Previous</span></a></li>
        <li class="active"><a href="#" role="button">1</a></li>
        <li><a href="#" role="button">2</a></li>
        <li><a href="#" role="button">3</a></li>
        <li><a href="#" role="button">4</a></li>
        <li><a href="#" role="button">5</a></li>
        <li><span>&hellip;</span></li>
        <li><a href="#" role="button">17</a></li>
        <li><a href="#" role="button"><span>Next </span><span aria-hidden="true">&raquo;</span></a></li>
</nav>

Compact pagination

A small, more compact, sizing that would be best used on internal web applications and mobile displays.

Example

Code

<nav aria-label="Compact pagination">
    <ul class="pagination">
        <li><a href="#" role="button"><span aria-hidden="true">&laquo;</span><span class="sr-only"> Previous</span></a></li>
        <li><a href="#" role="button">1</a></li>
        <li><a href="#" role="button">2</a></li>
        <li><a href="#" role="button">3</a></li>
        <li><a href="#" role="button">4</a></li>
        <li><a href="#" role="button">5</a></li>
        <li><a href="#" role="button"><span class="sr-only">Next </span><span aria-hidden="true">&raquo;</span></a></li>
</nav>

Simple 'Previous' and 'Next' links can be used for pagination that needs a linear navigation through adjoining results. For example these can be used at the bottom of a blog post or news article to allow the user to proceed to another post.

Example

Code

<nav aria-label="Pager">
    <ul class="pager">
        <li><a href="#" role="button">Previous</a></li>
        <li><a href="#" role="button">Next</a></li>
    </ul>
</nav>

Pager links also use the general disabled utility class from the pagination. Disabled links are to be used when there is no preceeding or following pages to navigate to.

Example

Code

<nav aria-label="Pager with disabled state">
    <ul class="pager">
        <li class="disabled"><a tabindex="-1" aria-disabled="true" href="#" role="button">Previous</a></li>
        <li><a href="#" role="button">Next</a></li>
    </ul>
</nav>