Add breadcrumbs

erbridge · Mar 5, 2021 · e8ba3ca · e8ba3ca
1 parent 6558b7d
commit e8ba3ca
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/components/Breadcrumbs.svelte b/src/components/Breadcrumbs.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let collapseOnMobile = false;
+  export let items: { text: string; href?: string }[];
+</script>
+
+<div
+  class="govuk-breadcrumbs{collapseOnMobile
+    ? ' govuk-breadcrumbs--collapse-on-mobile'
+    : ''}"
+>
+  <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>
diff --git a/src/routes/index.svelte b/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">