Breadcrumbs

Default

Svelte code

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

<Breadcrumbs {...{
  items: [
    {
      text: "Section",
      href: "/section"
    },
    {
      text: "Sub-section",
      href: "/section/sub-section"
    }
  ]
}} />

With one level

Svelte code

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

<Breadcrumbs {...{
  items: [
    {
      text: "Section",
      href: "/section"
    }
  ]
}} />

With multiple levels

Svelte code

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

<Breadcrumbs {...{
  items: [
    {
      text: "Home",
      href: "/"
    },
    {
      text: "Section",
      href: "/section"
    },
    {
      text: "Sub-section",
      href: "/section/sub-section"
    },
    {
      text: "Sub Sub-section",
      href: "/section/sub-section/sub-sub-section"
    }
  ]
}} />

Without the home section

Svelte code

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

<Breadcrumbs {...{
  items: [
    {
      text: "Service Manual",
      href: "/service-manual"
    },
    {
      text: "Agile Delivery",
      href: "/service-manual/agile-delivery"
    }
  ]
}} />

With last breadcrumb as current page

Svelte code

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

<Breadcrumbs {...{
  items: [
    {
      text: "Home",
      href: "/"
    },
    {
      text: "Passports, travel and living abroad",
      href: "/browse/abroad"
    },
    {
      text: "Travel abroad"
    }
  ]
}} />

With collapse on mobile

Svelte code

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

<Breadcrumbs {...{
  collapseOnMobile: true,
  items: [
    {
      text: "Home",
      href: "/"
    },
    {
      text: "Education, training and skills",
      href: "/education"
    },
    {
      text: "Special educational needs and disability (SEND) and high needs",
      href: "/education/special-educational-needs-and-disability-send-and-high-needs"
    }
  ]
}} />

Inverse

Svelte code

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

<Breadcrumbs {...{
  classes: "govuk-breadcrumbs--inverse",
  items: [
    {
      text: "Home",
      href: "/"
    },
    {
      text: "Passports, travel and living abroad",
      href: "/browse/abroad"
    },
    {
      text: "Travel abroad"
    }
  ]
}} />