Add breadcrumbs

package.json

@@ -28,10 +28,12 @@
     "@rollup/plugin-typescript": "^6.0.0",
     "@rollup/plugin-url": "^5.0.0",
     "@tsconfig/svelte": "^1.0.10",
+    "@types/classnames": "^2.2.11",
     "@types/compression": "^1.7.0",
     "@types/node": "^14.11.1",
     "@types/polka": "^0.5.1",
     "autoprefixer": "^10.2.5",
+    "classnames": "^2.2.6",
     "govuk-frontend": "^3.11.0",
     "postcss": "^8.2.7",
     "rollup": "^2.3.4",

src/components/Breadcrumbs.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import classnames from "classnames";
+
+  export let collapseOnMobile = false;
+  export let items: { text: string; href?: string }[];
+</script>
+
+<div
+  class={classnames("govuk-breadcrumbs", {
+    "govuk-breadcrumbs--collapse-on-mobile": collapseOnMobile,
+  })}
+>
+  <ol class="govuk-breadcrumbs__list">
+    {#each items as { text, href }}
+      <li
+        class="govuk-breadcrumbs__list-item"
+        aria-current={href === undefined ? "page" : undefined}
+      >
+        {#if href}
+          <a class="govuk-link" {href}>{text}</a>
+        {:else}
+          {text}
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</div>

src/routes/index.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import Breadcrumbs from "../components/Breadcrumbs.svelte";
   import PhaseBanner from "../components/PhaseBanner.svelte";
 </script>
 
 <div class="govuk-width-container">
   <PhaseBanner phase="prototype">This is a prototype</PhaseBanner>
+  <Breadcrumbs items={[{ text: "Home" }]} />
 
   <main class="govuk-main-wrapper" id="main-content" role="main">
     <div class="govuk-grid-row">