Components Pagination

Last updated: 20 April 2022

<nav class="moj-pagination" aria-label="Pagination navigation">

  <ul class="moj-pagination__list">
    <li class="moj-pagination__item  moj-pagination__item--prev">
      <a class="moj-pagination__link" href="">Previous<span class="govuk-visually-hidden"> page</span></a>
    </li>

    <li class="moj-pagination__item"><a class="moj-pagination__link" href="/page=1" aria-label="Page 1 of 30">1</a></li>

    <li class="moj-pagination__item moj-pagination__item--active" aria-label="Page 2 of 30" aria-current="page">2</li>

    <li class="moj-pagination__item"><a class="moj-pagination__link" href="/page=3" aria-label="Page 3 of 30">3</a></li>

    <li class="moj-pagination__item moj-pagination__item--dots"></li>

    <li class="moj-pagination__item"><a class="moj-pagination__link" href="/page=5" aria-label="Page 5 of 30">5</a></li>

    <li class="moj-pagination__item  moj-pagination__item--next">
      <a class="moj-pagination__link" href="">Next<span class="govuk-visually-hidden"> page</span></a>
    </li>
  </ul>
  <p class="moj-pagination__results">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
</nav>

Nunjucks macro options
Name Type Required Description
items array Yes An array of pages to display. See items.
results object No Optional object describing the total number of results and which ones are on the current page. See results.
previous object No A link to the previous page. See link.
next object No A link to the previous page. See link.
classes string No Any additional classes that you want to add to the pagination.

items

Name Type Required Description
type string No Set to dots to show ellipses instead of a page number.
text string No The link text - usually a page number.
href string No The link URL.
selected boolean No Set to true to indicate the currently selected page.

results

Name Type Required Description
count number Yes The total number of items.
from number Yes The number of the first item on the page.
to number Yes The number of the last item on the page.
text string No A label describing the items. Defaults to "results".
Name Type Required Description
text string No The link text - usually a page number.
href string No The link URL.


{%- from "moj/components/pagination/macro.njk" import mojPagination -%}

{{ mojPagination({
  items: [{
    text: '1',
    href: '/page=1'
  }, {
    text: '2',
    href: '/page=2',
    selected: true
  }, {
    text: '3',
    href: '/page=3'
  }, {
    type: 'dots'
  }, {
    text: '5',
    href: '/page=5'
  }],
  results: {
    count: 30,
    from: 10,
    to: 20,
    text: 'pages'
  },
  previous: {
    text: 'Previous',
    href: ''
  },
  next: {
    text: 'Next',
    href: ''
  }
}) }}

When to use

Use the pagination component to let users browse through a long list.

How to use

The component can be configured to hide or show the result count, previous and next buttons, ellipses or numbers.

Don't show pagination if there's only one page.

Just previous and next buttons

<nav class="moj-pagination" aria-label="Pagination navigation">

  <ul class="moj-pagination__list">
    <li class="moj-pagination__item  moj-pagination__item--prev">
      <a class="moj-pagination__link" href="#">Previous<span class="govuk-visually-hidden"> page</span></a>
    </li>

    <li class="moj-pagination__item  moj-pagination__item--next">
      <a class="moj-pagination__link" href="#">Next<span class="govuk-visually-hidden"> page</span></a>
    </li>
  </ul>
</nav>


{%- from "moj/components/pagination/macro.njk" import mojPagination -%}

{{ mojPagination({
  previous: {
    text: 'Previous',
    href: '#'
  },
  next: {
    text: 'Next',
    href: '#'
  }
}) }}