Skip to main content

Components Pagination

Important

The GOV.UK Design System has a similar component

The Pagination component in the GOV.UK Design System has a similar function and visual design to this component.

You should use the GOV.UK version if it fits your needs.

Open this example (Pagination (example)) in a new window 
<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 5">1</a></li>

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

    <li class="moj-pagination__item"><a class="moj-pagination__link" href="/page=3" aria-label="Page 3 of 5">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 5">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>11</b> to <b>20</b> of <b>30</b> results</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: 11,
    to: 20,
    text: 'results'
  },
  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

Open this example (Pagination with just previous and next buttons (example)) in a new window 
<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: '#'
  }
}) }}

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the pagination discussion on GitHub.