Alpha

This is an alpha release of our documentation site. View the roadmap.

Pagination

On this page

Open example in a new tab 
<nav aria-label="Pagination navigation">
  <ul class="cads-paging cads-list-unordered__inline">
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=1&amp;q=debt+and+money" aria-label="Go to first page" data-testid="paging-control">First</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=4&amp;q=debt+and+money" aria-label="Go to previous page" data-testid="paging-control">Previous</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=3&amp;q=debt+and+money" aria-label="Go to page 3" data-testid="paging-control">3</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=4&amp;q=debt+and+money" aria-label="Go to page 4" data-testid="paging-control">4</a>
    </li>
    <li class="cads-paging__item cads-paging__current">
      <a class="cads-paging__button" href="?page=5&amp;q=debt+and+money" aria-label="Go to page 5" aria-current="page" data-testid="paging-control">5</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=6&amp;q=debt+and+money" aria-label="Go to page 6" data-testid="paging-control">6</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=7&amp;q=debt+and+money" aria-label="Go to page 7" data-testid="paging-control">7</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=6&amp;q=debt+and+money" aria-label="Go to next page" data-testid="paging-control">Next</a>
    </li>
    <li class="cads-paging__item">
      <a class="cads-paging__button" href="?page=100&amp;q=debt+and+money" aria-label="Go to last page" data-testid="paging-control">Last</a>
    </li>
  </ul>
</nav>
<%= render CitizensAdviceComponents::Pagination.new(
  current_params: { "q" => "debt and money" },
  num_pages: 100,
  current_page: 5
) %>

Accessibility requirements

  • Pagination is wrapped in a <nav> with role="navigation" and an appropriate aria-label e.g. aria-label="Pagination navigation". You may wish to customise this based on the context it is used in, e.g. “Search pagination”
  • Each link has an appropriate aria-label e.g. “Go to first page”, or “Go to page 3”.
  • The current page has an aria-label of aria-label="Current page, page 5" with aria-current="page"

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render CitizensAdviceComponents::Pagination.new(
  current_params: { "q" => "debt and money" },
  num_pages: 100,
  current_page: 5
) %>

Component arguments

Argument Description
Argument num_pages Description Total number of pages of pagination to generate
Argument current_page Description The current page number
Argument current_params Description Current request query parameters
Argument param_name Description Optional. Pagination param name, defaults to page