Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Pagination

These examples are used for automated tests and may not follow service manual best practice.

Pagination default

Open this example in a new tab: Pagination default

Code

Markup

<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
  <ul class="nhsuk-list nhsuk-pagination__list">
    <li class="nhsuk-pagination-item--previous">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="#/section/treatments" rel="prev">
        <span class="nhsuk-pagination__title">
          Previous<span class="nhsuk-u-visually-hidden"> page</span>
        </span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">Treatments</span>
        <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
        </svg>
      </a>
    </li>
    <li class="nhsuk-pagination-item--next">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="#/section/symptoms" rel="next">
        <span class="nhsuk-pagination__title">
          Next<span class="nhsuk-u-visually-hidden"> page</span>
        </span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">Symptoms</span>
        <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

Macro

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

{{ pagination({
  previous: {
    labelText: "Treatments",
    href: "#/section/treatments"
  },
  next: {
    labelText: "Symptoms",
    href: "#/section/symptoms"
  }
}) }}

Pagination numbered

Open this example in a new tab: Pagination numbered

Code

Markup

<nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
  <a href="#" class="nhsuk-pagination__previous" rel="prev">
    <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
    </svg>
    <span class="nhsuk-pagination__title">
      Previous<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
  </a>
  <ul class="nhsuk-pagination__list">
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 2" aria-current="page">
        2
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 3">
        3
      </a>
    </li>
  </ul>
  <a href="#" class="nhsuk-pagination__next" rel="next">
    <span class="nhsuk-pagination__title">
      Next<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
    <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
    </svg>
  </a>
</nav>

Macro

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

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

Pagination numbered first page

Open this example in a new tab: Pagination numbered first page

Code

Markup

<nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
  <ul class="nhsuk-pagination__list">
    <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 1" aria-current="page">
        1
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 2">
        2
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 3">
        3
      </a>
    </li>
  </ul>
  <a href="#" class="nhsuk-pagination__next" rel="next">
    <span class="nhsuk-pagination__title">
      Next<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
    <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
    </svg>
  </a>
</nav>

Macro

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

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

Pagination numbered last page

Open this example in a new tab: Pagination numbered last page

Code

Markup

<nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
  <a href="#" class="nhsuk-pagination__previous" rel="prev">
    <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
    </svg>
    <span class="nhsuk-pagination__title">
      Previous<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
  </a>
  <ul class="nhsuk-pagination__list">
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 2">
        2
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 3" aria-current="page">
        3
      </a>
    </li>
  </ul>
</nav>

Macro

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

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

Pagination numbered with many pages

Open this example in a new tab: Pagination numbered with many pages

Code

Markup

<nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
  <a href="#" class="nhsuk-pagination__previous" rel="prev">
    <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
    </svg>
    <span class="nhsuk-pagination__title">
      Previous<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
  </a>
  <ul class="nhsuk-pagination__list">
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--ellipsis">
      &ctdot;
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 8">
        8
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 9">
        9
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 10" aria-current="page">
        10
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 11">
        11
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 12">
        12
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--ellipsis">
      &ctdot;
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 40">
        40
      </a>
    </li>
  </ul>
  <a href="#" class="nhsuk-pagination__next" rel="next">
    <span class="nhsuk-pagination__title">
      Next<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
    <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
    </svg>
  </a>
</nav>

Macro

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

{{ pagination({
  previous: {
    href: "#"
  },
  next: {
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      ellipsis: true
    },
    {
      number: 8,
      href: "#"
    },
    {
      number: 9,
      href: "#"
    },
    {
      number: 10,
      href: "#",
      current: true
    },
    {
      number: 11,
      href: "#"
    },
    {
      number: 12,
      href: "#"
    },
    {
      ellipsis: true
    },
    {
      number: 40,
      href: "#"
    }
  ]
}) }}

Pagination numbered with many pages (empty items)

Open this example in a new tab: Pagination numbered with many pages (empty items)

Code

Markup

<nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
  <a href="#" class="nhsuk-pagination__previous" rel="prev">
    <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
    </svg>
    <span class="nhsuk-pagination__title">
      Previous<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
  </a>
  <ul class="nhsuk-pagination__list">
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--ellipsis">
      &ctdot;
    </li>
    
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 9">
        9
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 10" aria-current="page">
        10
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 11">
        11
      </a>
    </li>
    
    <li class="nhsuk-pagination__item nhsuk-pagination__item--ellipsis">
      &ctdot;
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 40">
        40
      </a>
    </li>
  </ul>
  <a href="#" class="nhsuk-pagination__next" rel="next">
    <span class="nhsuk-pagination__title">
      Next<span class="nhsuk-u-visually-hidden"> page</span>
    </span>
    <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
    </svg>
  </a>
</nav>

Macro

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

{{ pagination({
  previous: {
    href: "#"
  },
  next: {
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      ellipsis: true
    },
    false,
    {
      number: 9,
      href: "#"
    },
    {
      number: 10,
      href: "#",
      current: true
    },
    {
      number: 11,
      href: "#"
    },
    false,
    {
      ellipsis: true
    },
    {
      number: 40,
      href: "#"
    }
  ]
}) }}

Pagination numbered with translations

Open this example in a new tab: Pagination numbered with translations

Code

Markup

<nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
  <a href="#" class="nhsuk-pagination__previous" rel="prev">
    <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
    </svg>
    <span class="nhsuk-pagination__title">
      Blaenorol
    </span>
  </a>
  <ul class="nhsuk-pagination__list">
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 1">
        1
      </a>
    </li>
    <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 2" aria-current="page">
        2
      </a>
    </li>
    <li class="nhsuk-pagination__item">
      <a class="nhsuk-pagination__link" href="#" aria-label="Page 3">
        3
      </a>
    </li>
  </ul>
  <a href="#" class="nhsuk-pagination__next" rel="next">
    <span class="nhsuk-pagination__title">
      Nesaf
    </span>
    <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
    </svg>
  </a>
</nav>

Macro

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

{{ pagination({
  previous: {
    text: "Blaenorol",
    href: "#"
  },
  next: {
    text: "Nesaf",
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      number: 2,
      href: "#",
      current: true
    },
    {
      number: 3,
      href: "#"
    }
  ]
}) }}

Pagination with only next

Open this example in a new tab: Pagination with only next

Code

Markup

<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
  <ul class="nhsuk-list nhsuk-pagination__list">
    <li class="nhsuk-pagination-item--next">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="#/section/symptoms" rel="next">
        <span class="nhsuk-pagination__title">
          Next<span class="nhsuk-u-visually-hidden"> page</span>
        </span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">Symptoms</span>
        <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

Macro

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

{{ pagination({
  next: {
    labelText: "Symptoms",
    href: "#/section/symptoms"
  }
}) }}

Pagination with only previous

Open this example in a new tab: Pagination with only previous

Code

Markup

<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
  <ul class="nhsuk-list nhsuk-pagination__list">
    <li class="nhsuk-pagination-item--previous">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="#/section/treatments" rel="prev">
        <span class="nhsuk-pagination__title">
          Previous<span class="nhsuk-u-visually-hidden"> page</span>
        </span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">Treatments</span>
        <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

Macro

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

{{ pagination({
  previous: {
    labelText: "Treatments",
    href: "#/section/treatments"
  }
}) }}

Pagination with translations

Open this example in a new tab: Pagination with translations

Code

Markup

<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
  <ul class="nhsuk-list nhsuk-pagination__list">
    <li class="nhsuk-pagination-item--previous">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="#/section/driniaethau" rel="prev">
        <span class="nhsuk-pagination__title">
          Blaenorol
        </span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">Driniaethau</span>
        <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
        </svg>
      </a>
    </li>
    <li class="nhsuk-pagination-item--next">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="#/section/symptomau" rel="next">
        <span class="nhsuk-pagination__title">
          Nesaf
        </span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">Symptomau</span>
        <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

Macro

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

{{ pagination({
  previous: {
    text: "Blaenorol",
    labelText: "Driniaethau",
    href: "#/section/driniaethau"
  },
  next: {
    text: "Nesaf",
    labelText: "Symptomau",
    href: "#/section/symptomau"
  }
}) }}