Pagination


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

Questions and contributions

For National Citizens Advice staff you can find us in the #design-system channel on Slack. For open issues, roadmap, and source code see the GitHub project.

Pagination

On this page

Accessibility requirements

Using with Rails

Component arguments

Questions and contributions