Pagination

note

This component is intended for staff-facing use only.

Use pagination to help a user move through a set of results that are too long to display on one page.

It works well when paired with a table of data.

This kind of pagination is more complex than most resident-facing services need. If you need to show more results than can comfortably fit on a single page, consider using simple pagination instead.

Users generally find proper pagination easier and more predictable to use than a "load more" pattern.

<nav class="lbh-pagination">
<div class="lbh-pagination__summary">Showing 101—150 of 246 results</div>
<ul class="lbh-pagination">
<li class="lbh-pagination__item">
<a class="lbh-pagination__link" href="#" aria-label="Previous page">
<span aria-hidden="true" role="presentation">&laquo;</span>
Previous
</a>
</li>
<li class="lbh-pagination__item">
<a class="lbh-pagination__link" href="#" aria-label="Page 1">1</a>
</li>
<li class="lbh-pagination__item">
<a class="lbh-pagination__link" href="#" aria-label="Page 2">2</a>
</li>
<li class="lbh-pagination__item">
<a
class="lbh-pagination__link lbh-pagination__link--current"
href="#"
aria-current="true"
aria-label="Page 3, current page"
>
3
</a>
</li>
<li class="lbh-pagination__item">
<a class="lbh-pagination__link" href="#" aria-label="Page 4">4</a>
</li>
<li class="lbh-pagination__item">
<a class="lbh-pagination__link" href="#" aria-label="Page 5">5</a>
</li>
<li class="lbh-pagination__item">
<a class="lbh-pagination__link" href="#" aria-label="Next page">
Next
<span aria-hidden="true" role="presentation">&raquo;</span>
</a>
</li>
</ul>
</nav>

With a table#

MonthRate for bicyclesRate for vehicles
January 2018£85£95
February 2018£75£55
March 2018£165£125

Without a summary#