University of St Andrews

Pagination

Pagination links indicate a series of additional content that exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results.

Rules for pagination

• Pagination must be used on search results and tables where they have multiple pages, for example, DataTables.
• Pager must be use on pages using the more news pattern.

Options available

• Pagination
• Pagination with disabled and active states
• Small pagination
• Pager
• Pager with disabled state

Pagination

Pagination must be used on galleries, tables and search results that have multiple pages.

<nav>
    <ul class="pagination pagination-lg">
        <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="active"><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul></nav>

Pagination with disabled and active states

Links are customisable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

<nav>
    <ul class="pagination pagination-lg">
        <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul></nav>

Small pagination

This sizing must be used on internal web applications.

<nav>
    <ul class="pagination ">
        <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
</ul></nav>

Pager

Simple 'previous' and 'next' links for pagination implementations with light markup and styles. These can be used at the bottom of a blog post or news article to allow the user to proceed to another post.

<nav>
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Pager with disabled state

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

<nav>
    <ul class="pager">
        <li class="disabled"><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>