Components

Pagination

Help users navigate forwards and backwards through a series of pages.

Open this pagination example in a new tab
HTML 
<nav class="govuk-pagination" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--prev"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Previous<span class="govuk-visually-hidden"> page</span>
      </span>
    </a>
  </div>
  <ul class="govuk-pagination__list">
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--current">
      <a
        class="govuk-link govuk-pagination__link"
        href="#"
        aria-label="Page 2"
        aria-current="page"
      >
        2
      </a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 3">
        3
      </a>
    </li>
  </ul>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" href="#" rel="next">
      <span class="govuk-pagination__link-title">
        Next<span class="govuk-visually-hidden"> page</span>
      </span>
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--next"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
        ></path>
      </svg>
    </a>
  </div>
</nav>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array

The items within the pagination component.

See items.
previous object

A link to the previous page, if there is a previous page.

See previous.
next object

A link to the next page, if there is a next page.

See next.
landmarkLabel string

The label for the navigation landmark that wraps the pagination. Defaults to "Pagination".
classes string

The classes you want to add to the pagination nav parent.
attributes object

The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
Options for items
Name Type Description
number string

The pagination item text – usually a page number.
visuallyHiddenText string

The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number.
href string Required.

The link's URL.
current boolean

Set to true to indicate the current page the user is on.
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for next
Name Type Description
text string

The text content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
href string Required.

The next page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for previous
Name Type Description
text string

The text content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
href string Required.

The previous page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.

 
{% from "moduk/components/pagination/macro.njk" import modukPagination -%}

{{ modukPagination({
  previous: {
    href: "#"
  },
  next: {
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      number: 2,
      current: true,
      href: "#"
    },
    {
      number: 3,
      href: "#"
    }
  ]
}) -}}

See GOV.UK pagination component guidance for:

  • when to use this component
  • when not to use it

How it works

See GOV.UK pagination component guidance for detail on how this component works.

For smaller numbers of pages

Use ‘Previous’ and ‘Next’ links to let users navigate through a small number of pages. Stack the links vertically, so they’re more obvious to screen magnifier users when they’re zoomed in:

Open this pagination example in a new tab
HTML 
<nav class="govuk-pagination govuk-pagination--block" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--prev"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Previous<span class="govuk-visually-hidden"> page</span>
      </span>
      <span class="govuk-visually-hidden">:</span>
      <span class="govuk-pagination__link-label">1 of 3</span>
    </a>
  </div>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" href="#" rel="next">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--next"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Next<span class="govuk-visually-hidden"> page</span>
      </span>
      <span class="govuk-visually-hidden">:</span>
      <span class="govuk-pagination__link-label">3 of 3</span>
    </a>
  </div>
</nav>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array

The items within the pagination component.

See items.
previous object

A link to the previous page, if there is a previous page.

See previous.
next object

A link to the next page, if there is a next page.

See next.
landmarkLabel string

The label for the navigation landmark that wraps the pagination. Defaults to "Pagination".
classes string

The classes you want to add to the pagination nav parent.
attributes object

The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
Options for items
Name Type Description
number string

The pagination item text – usually a page number.
visuallyHiddenText string

The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number.
href string Required.

The link's URL.
current boolean

Set to true to indicate the current page the user is on.
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for next
Name Type Description
text string

The text content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
href string Required.

The next page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for previous
Name Type Description
text string

The text content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
href string Required.

The previous page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.

 
{% from "moduk/components/pagination/macro.njk" import modukPagination -%}

{{ modukPagination({
  previous: {
    labelText: "1 of 3",
    href: "#"
  },
  next: {
    labelText: "3 of 3",
    href: "#"
  }
}) -}}

You can use link labels to give more context:

Open this pagination example in a new tab
HTML 
<nav class="govuk-pagination govuk-pagination--block" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--prev"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Previous<span class="govuk-visually-hidden"> page</span>
      </span>
      <span class="govuk-visually-hidden">:</span>
      <span class="govuk-pagination__link-label"
        >Understanding military personnel</span
      >
    </a>
  </div>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" href="#" rel="next">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--next"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Next<span class="govuk-visually-hidden"> page</span>
      </span>
      <span class="govuk-visually-hidden">:</span>
      <span class="govuk-pagination__link-label"
        >Find user research participants across Defence</span
      >
    </a>
  </div>
</nav>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array

The items within the pagination component.

See items.
previous object

A link to the previous page, if there is a previous page.

See previous.
next object

A link to the next page, if there is a next page.

See next.
landmarkLabel string

The label for the navigation landmark that wraps the pagination. Defaults to "Pagination".
classes string

The classes you want to add to the pagination nav parent.
attributes object

The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
Options for items
Name Type Description
number string

The pagination item text – usually a page number.
visuallyHiddenText string

The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number.
href string Required.

The link's URL.
current boolean

Set to true to indicate the current page the user is on.
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for next
Name Type Description
text string

The text content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
href string Required.

The next page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for previous
Name Type Description
text string

The text content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
href string Required.

The previous page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.

 
{% from "moduk/components/pagination/macro.njk" import modukPagination -%}

{{ modukPagination({
  previous: {
    labelText: "Understanding military personnel",
    href: "#"
  },
  next: {
    labelText: "Find user research participants across Defence",
    href: "#"
  }
}) -}}

For larger numbers of pages

Use a list-type layout if users need to navigate through large numbers of pages. For example, long lists of search results.

Open this pagination example in a new tab
HTML 
<nav class="govuk-pagination" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--prev"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Previous<span class="govuk-visually-hidden"> page</span>
      </span>
    </a>
  </div>
  <ul class="govuk-pagination__list">
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--ellipses">
      &ctdot;
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 6">
        6
      </a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--current">
      <a
        class="govuk-link govuk-pagination__link"
        href="#"
        aria-label="Page 7"
        aria-current="page"
      >
        7
      </a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 8">
        8
      </a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--ellipses">
      &ctdot;
    </li>
    <li class="govuk-pagination__item">
      <a
        class="govuk-link govuk-pagination__link"
        href="#"
        aria-label="Page 42"
      >
        42
      </a>
    </li>
  </ul>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" href="#" rel="next">
      <span class="govuk-pagination__link-title">
        Next<span class="govuk-visually-hidden"> page</span>
      </span>
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--next"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
        ></path>
      </svg>
    </a>
  </div>
</nav>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array

The items within the pagination component.

See items.
previous object

A link to the previous page, if there is a previous page.

See previous.
next object

A link to the next page, if there is a next page.

See next.
landmarkLabel string

The label for the navigation landmark that wraps the pagination. Defaults to "Pagination".
classes string

The classes you want to add to the pagination nav parent.
attributes object

The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
Options for items
Name Type Description
number string

The pagination item text – usually a page number.
visuallyHiddenText string

The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number.
href string Required.

The link's URL.
current boolean

Set to true to indicate the current page the user is on.
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for next
Name Type Description
text string

The text content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
href string Required.

The next page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for previous
Name Type Description
text string

The text content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
href string Required.

The previous page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.

 
{% from "moduk/components/pagination/macro.njk" import modukPagination -%}

{{ modukPagination({
  previous: {
    href: "#"
  },
  next: {
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      ellipsis: true
    },
    {
      number: 6,
      href: "#"
    },
    {
      number: 7,
      current: true,
      href: "#"
    },
    {
      number: 8,
      href: "#"
    },
    {
      ellipsis: true
    },
    {
      number: 42,
      href: "#"
    }
  ]
}) -}}

First pages and last pages

Do not show the previous page link on the first page — and do not show the next page link on the last page.

Open this pagination example in a new tab
HTML 
<nav class="govuk-pagination" aria-label="Pagination">
  <ul class="govuk-pagination__list">
    <li class="govuk-pagination__item govuk-pagination__item--current">
      <a
        class="govuk-link govuk-pagination__link"
        href="#"
        aria-label="Page 1"
        aria-current="page"
      >
        1
      </a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 2">
        2
      </a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 3">
        3
      </a>
    </li>
  </ul>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" href="#" rel="next">
      <span class="govuk-pagination__link-title">
        Next<span class="govuk-visually-hidden"> page</span>
      </span>
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--next"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
        ></path>
      </svg>
    </a>
  </div>
</nav>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array

The items within the pagination component.

See items.
previous object

A link to the previous page, if there is a previous page.

See previous.
next object

A link to the next page, if there is a next page.

See next.
landmarkLabel string

The label for the navigation landmark that wraps the pagination. Defaults to "Pagination".
classes string

The classes you want to add to the pagination nav parent.
attributes object

The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
Options for items
Name Type Description
number string

The pagination item text – usually a page number.
visuallyHiddenText string

The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number.
href string Required.

The link's URL.
current boolean

Set to true to indicate the current page the user is on.
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for next
Name Type Description
text string

The text content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
href string Required.

The next page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for previous
Name Type Description
text string

The text content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
href string Required.

The previous page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.

 
{% from "moduk/components/pagination/macro.njk" import modukPagination -%}

{{ modukPagination({
  next: {
    href: "#"
  },
  items: [
    {
      number: 1,
      current: true,
      href: "#"
    },
    {
      number: 2,
      href: "#"
    },
    {
      number: 3,
      href: "#"
    }
  ]
}) -}}
Open this pagination example in a new tab
HTML 
<nav class="govuk-pagination" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
      <svg
        class="govuk-pagination__icon govuk-pagination__icon--prev"
        xmlns="http://www.w3.org/2000/svg"
        height="13"
        width="15"
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 15 13"
      >
        <path
          d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
        ></path>
      </svg>
      <span class="govuk-pagination__link-title">
        Previous<span class="govuk-visually-hidden"> page</span>
      </span>
    </a>
  </div>
  <ul class="govuk-pagination__list">
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 2">
        2
      </a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--current">
      <a
        class="govuk-link govuk-pagination__link"
        href="#"
        aria-label="Page 3"
        aria-current="page"
      >
        3
      </a>
    </li>
  </ul>
</nav>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array

The items within the pagination component.

See items.
previous object

A link to the previous page, if there is a previous page.

See previous.
next object

A link to the next page, if there is a next page.

See next.
landmarkLabel string

The label for the navigation landmark that wraps the pagination. Defaults to "Pagination".
classes string

The classes you want to add to the pagination nav parent.
attributes object

The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
Options for items
Name Type Description
number string

The pagination item text – usually a page number.
visuallyHiddenText string

The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number.
href string Required.

The link's URL.
current boolean

Set to true to indicate the current page the user is on.
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for next
Name Type Description
text string

The text content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the next page. Defaults to "Next page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
href string Required.

The next page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.
Options for previous
Name Type Description
text string

The text content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
html string

The HTML content of the link to the previous page. Defaults to "Previous page", with 'page' being visually hidden. If html is provided, the text option will be ignored.
labelText string

The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
href string Required.

The previous page's URL.
attributes object

The HTML attributes (for example, data attributes) you want to add to the anchor.

 
{% from "moduk/components/pagination/macro.njk" import modukPagination -%}

{{ modukPagination({
  previous: {
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      number: 2,
      href: "#"
    },
    {
      number: 3,
      current: true,
      href: "#"
    }
  ]
}) -}}

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.