From 17b567bcd936616dd0c1f18d4525b8511161a422 Mon Sep 17 00:00:00 2001
From: micsblank <81748614+micsblank@users.noreply.github.com>
Date: Wed, 3 Jun 2026 14:45:26 +1000
Subject: [PATCH 1/4] add mobile breadcrumb

---
 app/components/breadcrumb.tsx | 50 ++++++++++++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/app/components/breadcrumb.tsx b/app/components/breadcrumb.tsx
index fb1c89d8a2..80c03ecfc1 100644
--- a/app/components/breadcrumb.tsx
+++ b/app/components/breadcrumb.tsx
@@ -47,7 +47,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
 }) => {
   const pathname = usePathname();
 
-  const breadcrumbItems = useMemo(() => {
+  const { breadcrumbItems, mobileParent } = useMemo(() => {
     const pathSegments = pathname
       .split("/")
       .filter((segment) => segment !== "");
@@ -118,14 +118,50 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
       );
     });
 
-    return items;
+    let mobileParent: { label: string; href: string };
+    if (pathSegments.length >= 2) {
+      const parentIndex = pathSegments.length - 2;
+      mobileParent = {
+        label: getDisplayName(pathSegments[parentIndex]),
+        href: "/" + pathSegments.slice(0, parentIndex + 1).join("/"),
+      };
+    } else {
+      mobileParent = { label: "Home", href: "/" };
+    }
+
+    return { breadcrumbItems: items, mobileParent };
   }, [pathname, path, title, seoSchema, additionalReplacements]);
 
   return (
-    <Breadcrumb>
-      <BreadcrumbList className="gap-2 font-normal">
-        {breadcrumbItems}
-      </BreadcrumbList>
-    </Breadcrumb>
+    <>
+      <Breadcrumb className="hidden sm:block">
+        <BreadcrumbList className="gap-2 font-normal">
+          {breadcrumbItems}
+        </BreadcrumbList>
+      </Breadcrumb>
+      <nav className="sm:hidden" aria-label={`Back to ${mobileParent.label}`}>
+        <a
+          href={mobileParent.href}
+          className="inline-flex items-center gap-1 text-xs text-gray-700 hover:text-sswRed"
+          aria-label={`Back to ${mobileParent.label}`}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M15 18l-6-6 6-6" />
+          </svg>
+          {mobileParent.label}
+        </a>
+      </nav>
+    </>
   );
 };

From 6c15835587ead712f51b403b5510c79fe5678a0c Mon Sep 17 00:00:00 2001
From: micsblank <81748614+micsblank@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:21:25 +1000
Subject: [PATCH 2/4] last breadcrumb text is white

---
 app/components/breadcrumb.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/breadcrumb.tsx b/app/components/breadcrumb.tsx
index 80c03ecfc1..06297f5082 100644
--- a/app/components/breadcrumb.tsx
+++ b/app/components/breadcrumb.tsx
@@ -97,7 +97,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
         <BreadcrumbItem key={`item-${index}`}>
           {isLast ? (
             <BreadcrumbPage
-              className={"text-xs text-gray-700 no-underline"}
+              className={"text-xs text-white no-underline"}
               {...(seoSchema
                 ? { "data-tina-field": tinaField(seoSchema, "title") }
                 : {})}

From a9569d1de5ef70692a546bda347fe816e8ab04ec Mon Sep 17 00:00:00 2001
From: micsblank <81748614+micsblank@users.noreply.github.com>
Date: Wed, 3 Jun 2026 17:28:22 +1000
Subject: [PATCH 3/4] breadcrumb edits

---
 app/components/breadcrumb.tsx                 |  6 +--
 components/blocks/breadcrumbs/breadcrumbs.tsx | 41 ++++++++++++++++++-
 components/ui/breadcrumb.tsx                  |  3 +-
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/components/breadcrumb.tsx b/app/components/breadcrumb.tsx
index 06297f5082..f493cac722 100644
--- a/app/components/breadcrumb.tsx
+++ b/app/components/breadcrumb.tsx
@@ -89,7 +89,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
           key={`separator-${index}`}
           className="text-xs text-gray-700"
         >
-          {">"}
+          {"/"}
         </BreadcrumbSeparator>
       );
 
@@ -97,7 +97,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
         <BreadcrumbItem key={`item-${index}`}>
           {isLast ? (
             <BreadcrumbPage
-              className={"text-xs text-white no-underline"}
+              className={"text-xs text-gray-700 no-underline"}
               {...(seoSchema
                 ? { "data-tina-field": tinaField(seoSchema, "title") }
                 : {})}
@@ -142,7 +142,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
       <nav className="sm:hidden" aria-label={`Back to ${mobileParent.label}`}>
         <a
           href={mobileParent.href}
-          className="inline-flex items-center gap-1 text-xs text-gray-700 hover:text-sswRed"
+          className="unstyled inline-flex items-center gap-1 text-xs text-gray-700 no-underline hover:text-sswRed"
           aria-label={`Back to ${mobileParent.label}`}
         >
           <svg
diff --git a/components/blocks/breadcrumbs/breadcrumbs.tsx b/components/blocks/breadcrumbs/breadcrumbs.tsx
index 7c6027b886..388fb7eb6d 100644
--- a/components/blocks/breadcrumbs/breadcrumbs.tsx
+++ b/components/blocks/breadcrumbs/breadcrumbs.tsx
@@ -103,10 +103,23 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
   // Index 0 is an empty string if the path starts with a slash
   const links = getLinks(paths, data, data.finalBreadcrumb);
 
+  // Parent one level above the current page, for the collapsed mobile view
+  const segments = paths.filter((segment) => segment !== "");
+  const mobileParent =
+    segments.length >= 2
+      ? {
+          label:
+            global.breadcrumbReplacements.find(
+              (value) => value.from === segments[segments.length - 2]
+            )?.to || segments[segments.length - 2],
+          href: `/${segments[segments.length - 2]}`,
+        }
+      : { label: global.breadcrumbHomeRoute, href: "/" };
+
   return (
     <V2ComponentWrapper data={data}>
       <Container size="custom" padding="px-4 sm:px-8" className="pt-8 sm:pt-12">
-        <Breadcrumb className="text-gray-300">
+        <Breadcrumb className="hidden text-gray-300 sm:block">
           <BreadcrumbList>
             {links.map((link, index) => (
               // react fragments don't appear in the dom
@@ -121,6 +134,32 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
             ))}
           </BreadcrumbList>
         </Breadcrumb>
+        <nav
+          className="text-gray-300 sm:hidden"
+          aria-label={`Back to ${mobileParent.label}`}
+        >
+          <a
+            href={mobileParent.href}
+            className="unstyled inline-flex items-center gap-1 text-sm no-underline transition-colors hover:text-white"
+            aria-label={`Back to ${mobileParent.label}`}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+            {mobileParent.label}
+          </a>
+        </nav>
       </Container>
     </V2ComponentWrapper>
   );
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index 6978ab15d4..3ec5d1e54e 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -114,5 +114,6 @@ export {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
+  BreadcrumbSeparator
 };
+

From 294c971d647a7ec0238795a4f515535602c72efb Mon Sep 17 00:00:00 2001
From: micsblank <81748614+micsblank@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:25:26 +1000
Subject: [PATCH 4/4] Enacting changes from Josh and Isaac

---
 app/components/breadcrumb.tsx                 | 26 +++++-----------
 components/blocks/breadcrumbs/breadcrumbs.tsx | 30 +++++--------------
 2 files changed, 15 insertions(+), 41 deletions(-)

diff --git a/app/components/breadcrumb.tsx b/app/components/breadcrumb.tsx
index f493cac722..e4d32481a4 100644
--- a/app/components/breadcrumb.tsx
+++ b/app/components/breadcrumb.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { ArrowLeft } from "lucide-react";
 import { usePathname } from "next/navigation";
 import React, { FC, useMemo } from "react";
 import { tinaField } from "tinacms/dist/react";
@@ -70,7 +71,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
         <BreadcrumbLink
           href="/"
           className={
-            "text-xs text-gray-700 underline-offset-1 hover:text-sswRed"
+            "text-sm text-gray-700 underline-offset-1 hover:text-sswRed"
           }
         >
           Home
@@ -87,7 +88,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
       items.push(
         <BreadcrumbSeparator
           key={`separator-${index}`}
-          className="text-xs text-gray-700"
+          className="text-sm text-gray-700"
         >
           {"/"}
         </BreadcrumbSeparator>
@@ -97,7 +98,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
         <BreadcrumbItem key={`item-${index}`}>
           {isLast ? (
             <BreadcrumbPage
-              className={"text-xs text-gray-700 no-underline"}
+              className={"text-sm text-gray-700 no-underline"}
               {...(seoSchema
                 ? { "data-tina-field": tinaField(seoSchema, "title") }
                 : {})}
@@ -108,7 +109,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
             <BreadcrumbLink
               href={href}
               className={
-                "text-xs text-gray-700 underline-offset-1 hover:text-sswRed"
+                "text-sm text-gray-700 underline-offset-1 hover:text-sswRed"
               }
             >
               {displayName}
@@ -142,23 +143,10 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
       <nav className="sm:hidden" aria-label={`Back to ${mobileParent.label}`}>
         <a
           href={mobileParent.href}
-          className="unstyled inline-flex items-center gap-1 text-xs text-gray-700 no-underline hover:text-sswRed"
+          className="unstyled inline-flex items-center gap-1 text-sm text-gray-700 no-underline hover:text-sswRed hover:no-underline"
           aria-label={`Back to ${mobileParent.label}`}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M15 18l-6-6 6-6" />
-          </svg>
+          <ArrowLeft className="h-[1em] w-[1em]" aria-hidden="true" />
           {mobileParent.label}
         </a>
       </nav>
diff --git a/components/blocks/breadcrumbs/breadcrumbs.tsx b/components/blocks/breadcrumbs/breadcrumbs.tsx
index 388fb7eb6d..50ccc1e29c 100644
--- a/components/blocks/breadcrumbs/breadcrumbs.tsx
+++ b/components/blocks/breadcrumbs/breadcrumbs.tsx
@@ -20,6 +20,7 @@ import { Container } from "@/components/util/container";
 import global from "@/content/global/index.json";
 import { cn } from "@/lib/utils";
 import { Consultingv2BlocksBreadcrumbs } from "@/tina/types";
+import { ArrowLeft } from "lucide-react";
 import { usePathname } from "next/navigation";
 import React from "react";
 import { tinaField } from "tinacms/dist/react";
@@ -105,15 +106,13 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
 
   // Parent one level above the current page, for the collapsed mobile view
   const segments = paths.filter((segment) => segment !== "");
+  const replacementMap = new Map(
+    global.breadcrumbReplacements.map((r) => [r.from, r.to])
+  );
+  const parent = segments[segments.length - 2];
   const mobileParent =
     segments.length >= 2
-      ? {
-          label:
-            global.breadcrumbReplacements.find(
-              (value) => value.from === segments[segments.length - 2]
-            )?.to || segments[segments.length - 2],
-          href: `/${segments[segments.length - 2]}`,
-        }
+      ? { label: replacementMap.get(parent) ?? parent, href: `/${parent}` }
       : { label: global.breadcrumbHomeRoute, href: "/" };
 
   return (
@@ -140,23 +139,10 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
         >
           <a
             href={mobileParent.href}
-            className="unstyled inline-flex items-center gap-1 text-sm no-underline transition-colors hover:text-white"
+            className="unstyled inline-flex items-center gap-1 text-sm no-underline transition-colors hover:text-white hover:no-underline"
             aria-label={`Back to ${mobileParent.label}`}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M15 18l-6-6 6-6" />
-            </svg>
+            <ArrowLeft className="h-[1em] w-[1em]" aria-hidden="true" />
             {mobileParent.label}
           </a>
         </nav>