University of St Andrews

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

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

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">
		<li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
		<li class="active"><a href="#">1 <span class="sr-only">(current)</span></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>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

<nav>
  <ul class="pagination">
    <li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
    <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
    ...
  </ul>
</nav>

Sizing

Add .pagination-lg or .pagination-sm for additional sizes.

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

Quick previous and next links for simple pagination implementations with light markup and styles.

Default example

By default, the pager centres links.

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

Aligned links

Alternatively, you can align each link to the sides:

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
  </ul>
</nav>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
  </ul>
</nav>