Skip to main content
All components

ComponentPagination

11 of 11 upstream examples match. Razor component: <NhsukPagination>

Default

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Label = "Treatments",
        Href = "#/section/treatments",
    })"
    next-options="@(new PaginationNextOptions
    {
        Label = "Symptoms",
        Href = "#/section/symptoms",
    })"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Label = "Treatments",
        Href = "#/section/treatments",
    })"
    Next="@(new PaginationNextOptions
    {
        Label = "Symptoms",
        Href = "#/section/symptoms",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

Numbered

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Href = "#/section/1",
    })"
    next-options="@(new PaginationNextOptions
    {
        Href = "#/section/3",
    })"
    items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
        },
    ])"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Href = "#/section/1",
    })"
    Next="@(new PaginationNextOptions
    {
        Href = "#/section/3",
    })"
    Items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

Numbered first page

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    next-options="@(new PaginationNextOptions
    {
        Href = "#/section/2",
    })"
    items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
        },
    ])"
/>
Blazor 
<NhsukPagination
    Next="@(new PaginationNextOptions
    {
        Href = "#/section/2",
    })"
    Items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

Numbered last page

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Href = "#/section/2",
    })"
    items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
            Current = true,
        },
    ])"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Href = "#/section/2",
    })"
    Items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
            Current = true,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

Numbered with many pages

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Href = "#/section/9",
    })"
    next-options="@(new PaginationNextOptions
    {
        Href = "#/section/11",
    })"
    items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        new PaginationItemsItem
        {
            Number = "8",
            Href = "#/section/8",
        },
        new PaginationItemsItem
        {
            Number = "9",
            Href = "#/section/9",
        },
        new PaginationItemsItem
        {
            Number = "10",
            Href = "#/section/10",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "11",
            Href = "#/section/11",
        },
        new PaginationItemsItem
        {
            Number = "12",
            Href = "#/section/12",
        },
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        new PaginationItemsItem
        {
            Number = "40",
            Href = "#/section/40",
        },
    ])"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Href = "#/section/9",
    })"
    Next="@(new PaginationNextOptions
    {
        Href = "#/section/11",
    })"
    Items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        new PaginationItemsItem
        {
            Number = "8",
            Href = "#/section/8",
        },
        new PaginationItemsItem
        {
            Number = "9",
            Href = "#/section/9",
        },
        new PaginationItemsItem
        {
            Number = "10",
            Href = "#/section/10",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "11",
            Href = "#/section/11",
        },
        new PaginationItemsItem
        {
            Number = "12",
            Href = "#/section/12",
        },
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        new PaginationItemsItem
        {
            Number = "40",
            Href = "#/section/40",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

Numbered with many pages (empty items)

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Href = "#/section/9",
    })"
    next-options="@(new PaginationNextOptions
    {
        Href = "#/section/11",
    })"
    items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        null,
        new PaginationItemsItem
        {
            Number = "9",
            Href = "#/section/9",
        },
        new PaginationItemsItem
        {
            Number = "10",
            Href = "#/section/10",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "11",
            Href = "#/section/11",
        },
        null,
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        new PaginationItemsItem
        {
            Number = "40",
            Href = "#/section/40",
        },
    ])"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Href = "#/section/9",
    })"
    Next="@(new PaginationNextOptions
    {
        Href = "#/section/11",
    })"
    Items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        null,
        new PaginationItemsItem
        {
            Number = "9",
            Href = "#/section/9",
        },
        new PaginationItemsItem
        {
            Number = "10",
            Href = "#/section/10",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "11",
            Href = "#/section/11",
        },
        null,
        new PaginationItemsItem
        {
            Ellipsis = true,
        },
        new PaginationItemsItem
        {
            Number = "40",
            Href = "#/section/40",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

Numbered with translations

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Text = "Blaenorol",
        Href = "#/section/1",
    })"
    next-options="@(new PaginationNextOptions
    {
        Text = "Nesaf",
        Href = "#/section/3",
    })"
    items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
        },
    ])"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Text = "Blaenorol",
        Href = "#/section/1",
    })"
    Next="@(new PaginationNextOptions
    {
        Text = "Nesaf",
        Href = "#/section/3",
    })"
    Items="@([
        new PaginationItemsItem
        {
            Number = "1",
            Href = "#/section/1",
        },
        new PaginationItemsItem
        {
            Number = "2",
            Href = "#/section/2",
            Current = true,
        },
        new PaginationItemsItem
        {
            Number = "3",
            Href = "#/section/3",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

With deprecated options

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    options="@(new PaginationOptions
    {
        PreviousUrl = "#/section/treatments",
        PreviousPage = "Treatments",
        NextUrl = "#/section/symptoms",
        NextPage = "Symptoms",
    })"
/>
Blazor 
<NhsukPagination
    PreviousUrl="#/section/treatments"
    PreviousPage="Treatments"
    NextUrl="#/section/symptoms"
    NextPage="Symptoms"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

{{ pagination({
  "previousUrl": "#/section/treatments",
  "previousPage": "Treatments",
  "nextUrl": "#/section/symptoms",
  "nextPage": "Symptoms"
}) }}

With only next

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    next-options="@(new PaginationNextOptions
    {
        Label = "Symptoms",
        Href = "#/section/symptoms",
    })"
/>
Blazor 
<NhsukPagination
    Next="@(new PaginationNextOptions
    {
        Label = "Symptoms",
        Href = "#/section/symptoms",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

With only previous

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Label = "Treatments",
        Href = "#/section/treatments",
    })"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Label = "Treatments",
        Href = "#/section/treatments",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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

With translations

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-pagination
    previous-options="@(new PaginationPreviousOptions
    {
        Text = "Blaenorol",
        Label = "Driniaethau",
        Href = "#/section/driniaethau",
    })"
    next-options="@(new PaginationNextOptions
    {
        Text = "Nesaf",
        Label = "Symptomau",
        Href = "#/section/symptomau",
    })"
/>
Blazor 
<NhsukPagination
    Previous="@(new PaginationPreviousOptions
    {
        Text = "Blaenorol",
        Label = "Driniaethau",
        Href = "#/section/driniaethau",
    })"
    Next="@(new PaginationNextOptions
    {
        Text = "Nesaf",
        Label = "Symptomau",
        Href = "#/section/symptomau",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/pagination/macro.njk" import pagination %}

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