Skip to main content

Pagination examples

  • # default

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}) }}

  • # with custom link and item text

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous",
    "text": "Previous page"
  },
  "next": {
    "href": "/next",
    "text": "Next page"
  },
  "items": [
    {
      "number": "one",
      "href": "/page/1"
    },
    {
      "number": "two",
      "href": "/page/2",
      "current": true
    },
    {
      "number": "three",
      "href": "/page/3"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous",
    "text": "Previous page"
  },
  "next": {
    "href": "/next",
    "text": "Next page"
  },
  "items": [
    {
      "number": "one",
      "href": "/page/1"
    },
    {
      "number": "two",
      "href": "/page/2",
      "current": true
    },
    {
      "number": "three",
      "href": "/page/3"
    }
  ]
}) }}

  • # with many pages

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "ellipsis": true
    },
    {
      "number": 8,
      "href": "/page/8"
    },
    {
      "number": 9,
      "href": "/page/9"
    },
    {
      "number": 10,
      "href": "/page/10",
      "current": true
    },
    {
      "number": 11,
      "href": "/page/11"
    },
    {
      "number": 12,
      "href": "/page/12"
    },
    {
      "ellipsis": true
    },
    {
      "number": 40,
      "href": "/page/40"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

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

  • # first page

    Open this example in a new tab: button 
    {
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1",
      "current": true
    },
    {
      "number": 2,
      "href": "/page/2"
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1",
      "current": true
    },
    {
      "number": 2,
      "href": "/page/2"
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}) }}

  • # last page

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2"
    },
    {
      "number": 3,
      "href": "/page/3",
      "current": true
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2"
    },
    {
      "number": 3,
      "href": "/page/3",
      "current": true
    }
  ]
}) }}

  • # with prev and next only

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  }
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  }
}) }}

  • # with prev and next only and labels

    Open this example in a new tab: button 
    {
  "previous": {
    "text": "Previous page",
    "labelText": "Paying VAT and duty",
    "href": "/previous"
  },
  "next": {
    "text": "Next page",
    "labelText": "Registering an imported vehicle",
    "href": "/next"
  }
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "text": "Previous page",
    "labelText": "Paying VAT and duty",
    "href": "/previous"
  },
  "next": {
    "text": "Next page",
    "labelText": "Registering an imported vehicle",
    "href": "/next"
  }
}) }}

  • # with prev and next only and very long labels

    Open this example in a new tab: button 
    {
  "previous": {
    "text": "Previous page",
    "labelText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "href": "/previous"
  },
  "next": {
    "text": "Next page",
    "labelText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "href": "/next"
  }
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "text": "Previous page",
    "labelText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "href": "/previous"
  },
  "next": {
    "text": "Next page",
    "labelText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "href": "/next"
  }
}) }}

  • # with previous only

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  }
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous"
  }
}) }}

  • # with next only

    Open this example in a new tab: button 
    {
  "next": {
    "href": "/next"
  }
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "next": {
    "href": "/next"
  }
}) }}

  • # with custom classes

    Open this example in a new tab: button 
    {
  "classes": "my-custom-class",
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "classes": "my-custom-class",
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}) }}

  • # with custom attributes

    Open this example in a new tab: button 
    {
  "attributes": {
    "data-attribute-1": "value-1",
    "data-attribute-2": "value-2"
  },
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "attributes": {
    "data-attribute-1": "value-1",
    "data-attribute-2": "value-2"
  },
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}) }}

  • # with custom navigation landmark

    Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "landmarkLabel": "search",
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "landmarkLabel": "search",
  "items": [
    {
      "number": 1,
      "href": "/page/1"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true
    },
    {
      "number": 3,
      "href": "/page/3"
    }
  ]
}) }}
  • Open this example in a new tab: button 
    {
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1",
      "visuallyHiddenText": "1st page"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true,
      "visuallyHiddenText": "2nd page (you are currently on this page)"
    },
    {
      "number": 3,
      "href": "/page/3",
      "visuallyHiddenText": "3rd page"
    }
  ]
}
    
{% from "govuk/components/pagination/macro.njk" import govukPagination %}

{{ govukPagination({
  "previous": {
    "href": "/previous"
  },
  "next": {
    "href": "/next"
  },
  "items": [
    {
      "number": 1,
      "href": "/page/1",
      "visuallyHiddenText": "1st page"
    },
    {
      "number": 2,
      "href": "/page/2",
      "current": true,
      "visuallyHiddenText": "2nd page (you are currently on this page)"
    },
    {
      "number": 3,
      "href": "/page/3",
      "visuallyHiddenText": "3rd page"
    }
  ]
}) }}