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.

Last updated: 11 October 2022

Open this 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 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".

link

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

Open this 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: '#'
  }
}) }}