Pagination

Default

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

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

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  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"
    }
  ]
}} />

With custom link and item text

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  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 custom accessible labels on item links

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  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"
    }
  ]
}} />

With many pages

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

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

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  next: {
    href: "/next"
  },
  items: [
    {
      number: 1,
      href: "/page/1",
      current: true
    },
    {
      number: 2,
      href: "/page/2"
    },
    {
      number: 3,
      href: "/page/3"
    }
  ]
}} />

Last page

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

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

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  previous: {
    href: "/previous"
  },
  next: {
    href: "/next"
  }
}} />

With prev and next only and labels

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

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

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  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 prev and next only in a different language

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  previous: {
    text: "précédente",
    href: "/previous"
  },
  next: {
    text: "suivante",
    href: "/next"
  }
}} />

With previous only

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  previous: {
    href: "/previous"
  }
}} />

With next only

Svelte code

<script>
	import { Pagination } from '@danboscaro/govuk-svelte'
</script>

<Pagination {...{
  next: {
    href: "/next"
  }
}} />