Components

Pagination

To be reviewed

Created in June 2021.

How to use ‘to be reviewed’ components

Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently. Read about all the Design System statuses.

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 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="#" 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="#" 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="#" 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".

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: "#"
  }, {
    text: "2",
    href: "#",
    selected: true
  }, {
    text: "3",
    href: "#"
  }, {
    type: "dots"
  }, {
    text: "5",
    href: "#"
  }],
  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 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>

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({
  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.