From 7cfcc5e81053e6976b361563b45f8f547fee2d13 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Tue, 9 Jan 2024 15:18:41 -0800
Subject: [PATCH 01/33] feat: breadcrumb

---
 blocks/breadcrumb/breadcrumb.css | 88 ++++++++++++++++++++++++++++++++
 blocks/breadcrumb/breadcrumb.js  |  8 +++
 blocks/header/header.js          |  9 +++-
 styles/styles.css                |  3 ++
 4 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 blocks/breadcrumb/breadcrumb.css
 create mode 100644 blocks/breadcrumb/breadcrumb.js

diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css
new file mode 100644
index 00000000..7a8fa512
--- /dev/null
+++ b/blocks/breadcrumb/breadcrumb.css
@@ -0,0 +1,88 @@
+.breadcrumb {
+  display: none;
+  width: 100%;
+  max-height: var(--breadcrumb-height);
+  z-index: 100;
+  height: var(--breadcrumb-height);
+  max-width: 1200px;
+  padding: 0 32px;
+  overflow: hidden;
+  margin: auto;
+}
+
+.breadcrumb ol {
+  display: flex;
+  flex-flow: wrap;
+  list-style: none;
+  padding: 8px 0;
+}
+
+.breadcrumb.contained.block > div > div > ol {
+  margin: 0;
+}
+
+.breadcrumb ol li {
+  padding-right: 8px;
+  padding-inline-start: 0;
+  font-size: var(--body-font-size-xs);
+}
+
+.breadcrumb ol li:not(:last-child) a::after {
+  content: "/";
+  padding-left: 8px;
+}
+
+.breadcrumb ol li a {
+  text-decoration: none;
+  color: var(--dark-color);
+  font-size: var(--body-font-size-xs);
+}
+
+.breadcrumb ol li:last-of-type a {
+  color: var(--text-color);
+}
+
+.breadcrumb .category {
+  text-transform: capitalize;
+}
+
+@media screen and (min-width: 600px) {
+  .breadcrumb {
+    display: block;
+    position: sticky;
+    top: calc(var(--nav-height));
+    left: 0;
+  }
+
+  .block.breadcrumb {
+    max-width: none;
+  }
+
+  .breadcrumb ol {
+    padding: 11px 0 12px;
+    margin: 0 auto;
+  }
+
+  .breadcrumb:not(.no-shadow) {
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .breadcrumb:not(.no-shadow) {
+    margin-bottom: 40px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .block.breadcrumb {
+    max-width: 1200px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .block.breadcrumb {
+    max-width: 1200px;
+    padding: 0 20px;
+  }
+}
diff --git a/blocks/breadcrumb/breadcrumb.js b/blocks/breadcrumb/breadcrumb.js
new file mode 100644
index 00000000..126e835d
--- /dev/null
+++ b/blocks/breadcrumb/breadcrumb.js
@@ -0,0 +1,8 @@
+export default async function decorate(block) {
+  block.innerHTML = `<ol>
+      <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
+      <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
+      <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
+      <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
+  </ol>`;
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
index 6b240361..4c8c7b2c 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,4 +1,6 @@
-import { getMetadata } from '../../scripts/aem.js';
+import {
+  buildBlock, decorateBlock, getMetadata, loadBlock,
+} from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
 // media query match that indicates mobile/tablet width
@@ -145,4 +147,9 @@ export default async function decorate(block) {
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
   block.append(navWrapper);
+
+  const breadcrumb = buildBlock('breadcrumb', '');
+  navWrapper.append(breadcrumb);
+  decorateBlock(breadcrumb);
+  loadBlock(breadcrumb);
 }
diff --git a/styles/styles.css b/styles/styles.css
index 1085460d..b559ac71 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -39,6 +39,9 @@
 
   /* nav height */
   --nav-height: 64px;
+
+  /* breadcrumb */
+  --breadcrumb-height: 50px;
 }
 
 @font-face {

From 29071737caa23253658635b061e34b9d6ec5f5be Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Tue, 9 Jan 2024 16:13:48 -0800
Subject: [PATCH 02/33] css: header height

---
 styles/styles.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index b559ac71..e75f68ab 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -37,11 +37,10 @@
   --heading-font-size-s: 20px;
   --heading-font-size-xs: 18px;
 
-  /* nav height */
+  /* header */
   --nav-height: 64px;
-
-  /* breadcrumb */
   --breadcrumb-height: 50px;
+  --header-height: calc(var(--nav-height) + var(--breadcrumb-height));
 }
 
 @font-face {

From 4f5ee4feb36664b152ed1440b50fc6459ddca0cc Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Tue, 9 Jan 2024 17:36:06 -0800
Subject: [PATCH 03/33] move into header

---
 blocks/breadcrumb/breadcrumb.css | 88 -------------------------------
 blocks/breadcrumb/breadcrumb.js  |  8 ---
 blocks/header/header.css         | 90 ++++++++++++++++++++++++++++++++
 blocks/header/header.js          | 13 +++--
 4 files changed, 99 insertions(+), 100 deletions(-)
 delete mode 100644 blocks/breadcrumb/breadcrumb.css
 delete mode 100644 blocks/breadcrumb/breadcrumb.js

diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css
deleted file mode 100644
index 7a8fa512..00000000
--- a/blocks/breadcrumb/breadcrumb.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.breadcrumb {
-  display: none;
-  width: 100%;
-  max-height: var(--breadcrumb-height);
-  z-index: 100;
-  height: var(--breadcrumb-height);
-  max-width: 1200px;
-  padding: 0 32px;
-  overflow: hidden;
-  margin: auto;
-}
-
-.breadcrumb ol {
-  display: flex;
-  flex-flow: wrap;
-  list-style: none;
-  padding: 8px 0;
-}
-
-.breadcrumb.contained.block > div > div > ol {
-  margin: 0;
-}
-
-.breadcrumb ol li {
-  padding-right: 8px;
-  padding-inline-start: 0;
-  font-size: var(--body-font-size-xs);
-}
-
-.breadcrumb ol li:not(:last-child) a::after {
-  content: "/";
-  padding-left: 8px;
-}
-
-.breadcrumb ol li a {
-  text-decoration: none;
-  color: var(--dark-color);
-  font-size: var(--body-font-size-xs);
-}
-
-.breadcrumb ol li:last-of-type a {
-  color: var(--text-color);
-}
-
-.breadcrumb .category {
-  text-transform: capitalize;
-}
-
-@media screen and (min-width: 600px) {
-  .breadcrumb {
-    display: block;
-    position: sticky;
-    top: calc(var(--nav-height));
-    left: 0;
-  }
-
-  .block.breadcrumb {
-    max-width: none;
-  }
-
-  .breadcrumb ol {
-    padding: 11px 0 12px;
-    margin: 0 auto;
-  }
-
-  .breadcrumb:not(.no-shadow) {
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (min-width: 900px) {
-  .breadcrumb:not(.no-shadow) {
-    margin-bottom: 40px;
-  }
-}
-
-@media (min-width: 1440px) {
-  .block.breadcrumb {
-    max-width: 1200px;
-  }
-}
-
-@media (min-width: 1440px) {
-  .block.breadcrumb {
-    max-width: 1200px;
-    padding: 0 20px;
-  }
-}
diff --git a/blocks/breadcrumb/breadcrumb.js b/blocks/breadcrumb/breadcrumb.js
deleted file mode 100644
index 126e835d..00000000
--- a/blocks/breadcrumb/breadcrumb.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default async function decorate(block) {
-  block.innerHTML = `<ol>
-      <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
-      <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
-      <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
-      <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
-  </ol>`;
-}
diff --git a/blocks/header/header.css b/blocks/header/header.css
index bf70a88a..3fe7ee77 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -273,3 +273,93 @@ header nav .nav-sections ul > li > ul > li {
 header nav .nav-tools {
   grid-area: tools;
 }
+
+
+header .breadcrumbs {
+  display: none;
+  width: 100%;
+  max-height: var(--breadcrumb-height);
+  z-index: 100;
+  height: var(--breadcrumb-height);
+  max-width: 1200px;
+  padding: 0 32px;
+  overflow: hidden;
+  margin: auto;
+}
+
+header .breadcrumbs ol {
+  display: flex;
+  flex-flow: wrap;
+  list-style: none;
+  padding: 8px 0;
+}
+
+.breadcrumb.contained.block > div > div > ol {
+  margin: 0;
+}
+
+header .breadcrumbs ol li {
+  padding-right: 8px;
+  padding-inline-start: 0;
+  font-size: var(--body-font-size-xs);
+}
+
+header .breadcrumbs ol li:not(:last-child) a::after {
+  content: "/";
+  padding-left: 8px;
+}
+
+header .breadcrumbs ol li a {
+  text-decoration: none;
+  color: var(--dark-color);
+  font-size: var(--body-font-size-xs);
+}
+
+header .breadcrumbs ol li:last-of-type a {
+  color: var(--text-color);
+}
+
+header .breadcrumbs .category {
+  text-transform: capitalize;
+}
+
+@media screen and (min-width: 600px) {
+  header .breadcrumbs {
+    display: block;
+    position: sticky;
+    top: calc(var(--nav-height));
+    left: 0;
+  }
+
+  header .breadcrumbs {
+    max-width: none;
+  }
+
+  header .breadcrumbs ol {
+    padding: 11px 0 12px;
+    margin: 0 auto;
+  }
+
+  .breadcrumb:not(.no-shadow) {
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .breadcrumb:not(.no-shadow) {
+    margin-bottom: 40px;
+  }
+}
+
+@media (min-width: 1440px) {
+  header .breadcrumbs {
+    max-width: 1200px;
+  }
+}
+
+@media (min-width: 1440px) {
+  header .breadcrumbs {
+    max-width: 1200px;
+    padding: 0 20px;
+  }
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
index 4c8c7b2c..c63b0cf6 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -148,8 +148,13 @@ export default async function decorate(block) {
   navWrapper.append(nav);
   block.append(navWrapper);
 
-  const breadcrumb = buildBlock('breadcrumb', '');
-  navWrapper.append(breadcrumb);
-  decorateBlock(breadcrumb);
-  loadBlock(breadcrumb);
+  const breadcrumbs = document.createElement('div');
+  breadcrumbs.className = 'breadcrumbs';
+  breadcrumbs.innerHTML = `<ol>
+      <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
+      <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
+      <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
+      <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
+  </ol>`;
+  navWrapper.append(breadcrumbs);
 }

From 25c8fd2749c223d88d736d61b2557a5beb6a96a9 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 09:37:56 -0800
Subject: [PATCH 04/33] update style

---
 404.html                 |  2 +-
 blocks/header/header.css |  4 ++--
 blocks/header/header.js  | 11 +++++++----
 styles/styles.css        | 10 +++++++---
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/404.html b/404.html
index 291959fe..1f862f9a 100644
--- a/404.html
+++ b/404.html
@@ -32,7 +32,7 @@
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {
-      min-height: calc(100vh - var(--nav-height));
+      min-height: calc(100vh - var(--header-height));
       display: flex;
       align-items: center;
     }
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 3fe7ee77..efa9ac3e 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -291,7 +291,7 @@ header .breadcrumbs ol {
   display: flex;
   flex-flow: wrap;
   list-style: none;
-  padding: 8px 0;
+  padding: 0 0;
 }
 
 .breadcrumb.contained.block > div > div > ol {
@@ -336,7 +336,7 @@ header .breadcrumbs .category {
   }
 
   header .breadcrumbs ol {
-    padding: 11px 0 12px;
+    padding: 0 0 12px;
     margin: 0 auto;
   }
 
diff --git a/blocks/header/header.js b/blocks/header/header.js
index c63b0cf6..65158c6e 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -148,13 +148,16 @@ export default async function decorate(block) {
   navWrapper.append(nav);
   block.append(navWrapper);
 
-  const breadcrumbs = document.createElement('div');
-  breadcrumbs.className = 'breadcrumbs';
-  breadcrumbs.innerHTML = `<ol>
+  if (getMetadata('breadcrumbs')) {
+    document.body.classList.add('breadcrumbs-enabled');
+    const breadcrumbs = document.createElement('div');
+    breadcrumbs.className = 'breadcrumbs';
+    breadcrumbs.innerHTML = `<ol>
       <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
       <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
       <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
       <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
   </ol>`;
-  navWrapper.append(breadcrumbs);
+    navWrapper.append(breadcrumbs);
+  }
 }
diff --git a/styles/styles.css b/styles/styles.css
index e75f68ab..ebbe6e41 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -40,7 +40,7 @@
   /* header */
   --nav-height: 64px;
   --breadcrumb-height: 50px;
-  --header-height: calc(var(--nav-height) + var(--breadcrumb-height));
+  --header-height: var(--nav-height);
 }
 
 @font-face {
@@ -71,12 +71,16 @@ body {
   display: none;
 }
 
+body.breadcrumbs-enabled {
+  --header-height: calc(var(--nav-height) + var(--breadcrumb-height));
+}
+
 body.appear {
   display: block;
 }
 
 header {
-  height: var(--nav-height);
+  height: var(--header-height);
 }
 
 h1,
@@ -90,7 +94,7 @@ h6 {
   line-height: 1.25;
   margin-top: 1em;
   margin-bottom: 0.5em;
-  scroll-margin: calc(var(--nav-height) + 1em);
+  scroll-margin: calc(var(--header-height) + 1em);
 }
 
 h1 { font-size: var(--heading-font-size-xxl); }

From 8168222e2518a48b3c23c3998176f80ccb8bc9db Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 10:21:05 -0800
Subject: [PATCH 05/33] build tree

---
 blocks/header/header.css |  4 +--
 blocks/header/header.js  | 78 +++++++++++++++++++++++++++++++++-------
 2 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index efa9ac3e..73fe601d 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -201,6 +201,7 @@ header nav .nav-sections ul > li > ul > li {
     position: relative;
     padding-right: 16px;
     cursor: pointer;
+    z-index: 10;
   }
 
   header nav .nav-sections .nav-drop::after {
@@ -279,7 +280,6 @@ header .breadcrumbs {
   display: none;
   width: 100%;
   max-height: var(--breadcrumb-height);
-  z-index: 100;
   height: var(--breadcrumb-height);
   max-width: 1200px;
   padding: 0 32px;
@@ -304,7 +304,7 @@ header .breadcrumbs ol li {
   font-size: var(--body-font-size-xs);
 }
 
-header .breadcrumbs ol li:not(:last-child) a::after {
+header .breadcrumbs ol li:not(:last-child)::after {
   content: "/";
   padding-left: 8px;
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
index 65158c6e..bba2ee0e 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,6 +1,4 @@
-import {
-  buildBlock, decorateBlock, getMetadata, loadBlock,
-} from '../../scripts/aem.js';
+import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
 // media query match that indicates mobile/tablet width
@@ -88,6 +86,70 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
   }
 }
 
+function buildBreadcrumbsFromNavTree(nav, currentUrl) {
+  let menuItem = Array.from(nav.querySelectorAll('a')).find((a) => a.href === currentUrl);
+  if (!menuItem) {
+    return [
+      { title: 'Home', url: '/' },
+      { title: document.head.title, url: currentUrl },
+    ];
+  }
+
+  const tree = [];
+  tree.unshift({ title: menuItem.textContent, url: menuItem.href });
+
+  while (menuItem.closest('ul')) {
+    menuItem = menuItem.closest('ul').closest('li');
+    if (!menuItem) break;
+    const menuLink = menuItem.querySelector(':scope > a');
+    if (menuLink) {
+      tree.unshift({ title: menuLink.textContent, url: menuLink.href });
+    } else {
+      const text = Array.from(menuItem.childNodes)
+        .filter((n) => n.nodeType === Node.TEXT_NODE)
+        .map((n) => n.textContent)
+        .join(' ');
+      tree.unshift({ title: text.trim(), url: null });
+    }
+  }
+
+  tree.unshift({ title: 'Home', url: '/' });
+  return tree;
+}
+
+function buildBreadcrumbs() {
+  const breadcrumbs = document.createElement('div');
+  breadcrumbs.className = 'breadcrumbs';
+
+  const tree = buildBreadcrumbsFromNavTree(document.querySelector('.nav-sections'), document.location.href);
+
+  // breadcrumbs.innerHTML = `<ol>
+  //     <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
+  //     <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
+  //     <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
+  //     <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
+  // </ol>`;
+
+  const ol = document.createElement('ol');
+  for (const item of tree) {
+    const li = document.createElement('li');
+    if (item.url) {
+      const a = document.createElement('a');
+      a.href = item.url;
+      a.textContent = item.title;
+      li.append(a);
+    } else {
+      li.textContent = item.title;
+    }
+    ol.append(li);
+  }
+  breadcrumbs.append(ol);
+
+  console.log(tree);
+
+  return breadcrumbs;
+}
+
 /**
  * decorates the header, mainly the nav
  * @param {Element} block The header block element
@@ -150,14 +212,6 @@ export default async function decorate(block) {
 
   if (getMetadata('breadcrumbs')) {
     document.body.classList.add('breadcrumbs-enabled');
-    const breadcrumbs = document.createElement('div');
-    breadcrumbs.className = 'breadcrumbs';
-    breadcrumbs.innerHTML = `<ol>
-      <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
-      <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
-      <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
-      <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
-  </ol>`;
-    navWrapper.append(breadcrumbs);
+    navWrapper.append(buildBreadcrumbs());
   }
 }

From 353dcd697d3eb075960eddb34aa82c58b4b55dd9 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 10:48:26 -0800
Subject: [PATCH 06/33] cleanup

---
 blocks/header/header.js | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index bba2ee0e..f5103473 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -121,17 +121,10 @@ function buildBreadcrumbs() {
   const breadcrumbs = document.createElement('div');
   breadcrumbs.className = 'breadcrumbs';
 
-  const tree = buildBreadcrumbsFromNavTree(document.querySelector('.nav-sections'), document.location.href);
-
-  // breadcrumbs.innerHTML = `<ol>
-  //     <li><a href="/home" class="breadcrumb-link-underline-effect">Home</a></li>
-  //     <li><a href="/docs/" class="breadcrumb-link-underline-effect">Documentation</a></li>
-  //     <li><a href="/docs/#build" class="breadcrumb-link-underline-effect category">Build</a></li>
-  //     <li><a href="/developer/block-collection" style="cursor: default;">Block Collection</a></li>
-  // </ol>`;
+  const crumbs = buildBreadcrumbsFromNavTree(document.querySelector('.nav-sections'), document.location.href);
 
   const ol = document.createElement('ol');
-  for (const item of tree) {
+  ol.append(...crumbs.map((item) => {
     const li = document.createElement('li');
     if (item.url) {
       const a = document.createElement('a');
@@ -141,12 +134,9 @@ function buildBreadcrumbs() {
     } else {
       li.textContent = item.title;
     }
-    ol.append(li);
-  }
+    return li;
+  }));
   breadcrumbs.append(ol);
-
-  console.log(tree);
-
   return breadcrumbs;
 }
 

From 6c69b45aa428749113abd092c7813e998ad626a0 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 10:54:46 -0800
Subject: [PATCH 07/33] refactor

---
 blocks/header/header.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index f5103473..7d7e9376 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -86,6 +86,17 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
   }
 }
 
+function getDirectTextContent(menuItem) {
+  const menuLink = menuItem.querySelector(':scope > a');
+  if (menuLink) {
+    return menuLink.textContent.trim();
+  }
+  return Array.from(menuItem.childNodes)
+    .filter((n) => n.nodeType === Node.TEXT_NODE)
+    .map((n) => n.textContent)
+    .join(' ');
+}
+
 function buildBreadcrumbsFromNavTree(nav, currentUrl) {
   let menuItem = Array.from(nav.querySelectorAll('a')).find((a) => a.href === currentUrl);
   if (!menuItem) {
@@ -95,26 +106,15 @@ function buildBreadcrumbsFromNavTree(nav, currentUrl) {
     ];
   }
 
-  const tree = [];
-  tree.unshift({ title: menuItem.textContent, url: menuItem.href });
-
-  while (menuItem.closest('ul')) {
-    menuItem = menuItem.closest('ul').closest('li');
-    if (!menuItem) break;
-    const menuLink = menuItem.querySelector(':scope > a');
-    if (menuLink) {
-      tree.unshift({ title: menuLink.textContent, url: menuLink.href });
-    } else {
-      const text = Array.from(menuItem.childNodes)
-        .filter((n) => n.nodeType === Node.TEXT_NODE)
-        .map((n) => n.textContent)
-        .join(' ');
-      tree.unshift({ title: text.trim(), url: null });
-    }
-  }
+  const crumbs = [];
+  do {
+    const link = menuItem.querySelector(':scope > a');
+    crumbs.unshift({ title: getDirectTextContent(menuItem), url: link ? link.href : null });
+    menuItem = menuItem.closest('ul')?.closest('li');
+  } while (menuItem);
 
-  tree.unshift({ title: 'Home', url: '/' });
-  return tree;
+  crumbs.unshift({ title: 'Home', url: '/' });
+  return crumbs;
 }
 
 function buildBreadcrumbs() {

From bcabd9ba96358536255c99391a082bf0500740fc Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 11:18:22 -0800
Subject: [PATCH 08/33] don't link the current page

---
 blocks/header/header.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 7d7e9376..1b2d4a8a 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -102,7 +102,8 @@ function buildBreadcrumbsFromNavTree(nav, currentUrl) {
   if (!menuItem) {
     return [
       { title: 'Home', url: '/' },
-      { title: document.head.title, url: currentUrl },
+      // last link is current page and should not be linked
+      { title: document.head.title },
     ];
   }
 
@@ -114,6 +115,9 @@ function buildBreadcrumbsFromNavTree(nav, currentUrl) {
   } while (menuItem);
 
   crumbs.unshift({ title: 'Home', url: '/' });
+
+  // last link is current page and should not be linked
+  crumbs[crumbs.length - 1].url = null;
   return crumbs;
 }
 
@@ -136,6 +140,7 @@ function buildBreadcrumbs() {
     }
     return li;
   }));
+
   breadcrumbs.append(ol);
   return breadcrumbs;
 }
@@ -200,7 +205,7 @@ export default async function decorate(block) {
   navWrapper.append(nav);
   block.append(navWrapper);
 
-  if (getMetadata('breadcrumbs')) {
+  if (getMetadata('breadcrumbs').toLowerCase() === 'true') {
     document.body.classList.add('breadcrumbs-enabled');
     navWrapper.append(buildBreadcrumbs());
   }

From b216f3a0fdb67afb4caa917842a5939c294ec079 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 11:43:26 -0800
Subject: [PATCH 09/33] style breadcrumbs

---
 blocks/header/header.css | 66 ++++++++--------------------------------
 styles/styles.css        | 11 +++++--
 2 files changed, 20 insertions(+), 57 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 73fe601d..90e33b25 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -277,14 +277,15 @@ header nav .nav-tools {
 
 
 header .breadcrumbs {
+  /* hide on mobile and tablet */
   display: none;
+
   width: 100%;
-  max-height: var(--breadcrumb-height);
-  height: var(--breadcrumb-height);
+  height: var(--breadcrumbs-height);
   max-width: 1200px;
-  padding: 0 32px;
   overflow: hidden;
-  margin: auto;
+  margin: 0 auto;
+  font-size: var(--breadcrumbs-font-size);
 }
 
 header .breadcrumbs ol {
@@ -292,16 +293,14 @@ header .breadcrumbs ol {
   flex-flow: wrap;
   list-style: none;
   padding: 0 0;
-}
-
-.breadcrumb.contained.block > div > div > ol {
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 header .breadcrumbs ol li {
   padding-right: 8px;
   padding-inline-start: 0;
-  font-size: var(--body-font-size-xs);
+  opacity: 50%;
 }
 
 header .breadcrumbs ol li:not(:last-child)::after {
@@ -309,57 +308,16 @@ header .breadcrumbs ol li:not(:last-child)::after {
   padding-left: 8px;
 }
 
-header .breadcrumbs ol li a {
-  text-decoration: none;
-  color: var(--dark-color);
-  font-size: var(--body-font-size-xs);
-}
-
-header .breadcrumbs ol li:last-of-type a {
+header .breadcrumbs ol li a:any-link {
   color: var(--text-color);
 }
 
-header .breadcrumbs .category {
-  text-transform: capitalize;
-}
-
-@media screen and (min-width: 600px) {
-  header .breadcrumbs {
-    display: block;
-    position: sticky;
-    top: calc(var(--nav-height));
-    left: 0;
-  }
-
-  header .breadcrumbs {
-    max-width: none;
-  }
-
-  header .breadcrumbs ol {
-    padding: 0 0 12px;
-    margin: 0 auto;
-  }
-
-  .breadcrumb:not(.no-shadow) {
-    margin-bottom: 24px;
-  }
+header .breadcrumbs ol li:last-of-type {
+  opacity: 100%;
 }
 
 @media screen and (min-width: 900px) {
-  .breadcrumb:not(.no-shadow) {
-    margin-bottom: 40px;
-  }
-}
-
-@media (min-width: 1440px) {
   header .breadcrumbs {
-    max-width: 1200px;
-  }
-}
-
-@media (min-width: 1440px) {
-  header .breadcrumbs {
-    max-width: 1200px;
-    padding: 0 20px;
+    display: block;
   }
 }
diff --git a/styles/styles.css b/styles/styles.css
index ebbe6e41..bcb84e27 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -39,8 +39,10 @@
 
   /* header */
   --nav-height: 64px;
-  --breadcrumb-height: 50px;
+  --breadcrumbs-height: 50px;
   --header-height: var(--nav-height);
+  --breadcrumbs-font-size: 14px;
+
 }
 
 @font-face {
@@ -71,8 +73,11 @@ body {
   display: none;
 }
 
-body.breadcrumbs-enabled {
-  --header-height: calc(var(--nav-height) + var(--breadcrumb-height));
+
+@media screen and (min-width: 900px) {
+  body.breadcrumbs-enabled {
+    --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));
+  }
 }
 
 body.appear {

From 2c26269f72e9a273d2c46713be8bad65721ba682 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 11:50:06 -0800
Subject: [PATCH 10/33] refactor creating crumbs

---
 blocks/header/header.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 1b2d4a8a..ffe3ebb9 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -98,23 +98,21 @@ function getDirectTextContent(menuItem) {
 }
 
 function buildBreadcrumbsFromNavTree(nav, currentUrl) {
+  const crumbs = [];
+
   let menuItem = Array.from(nav.querySelectorAll('a')).find((a) => a.href === currentUrl);
-  if (!menuItem) {
-    return [
-      { title: 'Home', url: '/' },
-      // last link is current page and should not be linked
-      { title: document.head.title },
-    ];
+  if (menuItem) {
+    do {
+      const link = menuItem.querySelector(':scope > a');
+      crumbs.unshift({ title: getDirectTextContent(menuItem), url: link ? link.href : null });
+      menuItem = menuItem.closest('ul')?.closest('li');
+    } while (menuItem);
+  } else {
+    crumbs.unshift({ title: getMetadata('og:title'), url: currentUrl });
   }
 
-  const crumbs = [];
-  do {
-    const link = menuItem.querySelector(':scope > a');
-    crumbs.unshift({ title: getDirectTextContent(menuItem), url: link ? link.href : null });
-    menuItem = menuItem.closest('ul')?.closest('li');
-  } while (menuItem);
-
-  crumbs.unshift({ title: 'Home', url: '/' });
+  const homeUrl = document.querySelector('.nav-brand a').href;
+  crumbs.unshift({ title: 'Home', url: homeUrl });
 
   // last link is current page and should not be linked
   crumbs[crumbs.length - 1].url = null;

From 585ba8234bd1a429c085a190cb4137eb37c7d279 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 11:53:24 -0800
Subject: [PATCH 11/33] style

---
 blocks/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 90e33b25..7d9252f3 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -280,6 +280,7 @@ header .breadcrumbs {
   /* hide on mobile and tablet */
   display: none;
 
+  padding: 0 32px;
   width: 100%;
   height: var(--breadcrumbs-height);
   max-width: 1200px;

From 47c9e9436f051c13acaba687e09ca56f4798794b Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 11:55:57 -0800
Subject: [PATCH 12/33] lint

---
 blocks/header/header.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 7d9252f3..502f7a4f 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -158,7 +158,6 @@ header nav .nav-sections {
   flex: 1 1 auto;
   display: none;
   visibility: hidden;
-  background-color: var(--overlay-color);
 }
 
 header nav[aria-expanded="true"] .nav-sections {
@@ -277,9 +276,7 @@ header nav .nav-tools {
 
 
 header .breadcrumbs {
-  /* hide on mobile and tablet */
   display: none;
-
   padding: 0 32px;
   width: 100%;
   height: var(--breadcrumbs-height);

From 7789b1adc9431bf83c60b6f51bed16a937917b2e Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 11:56:08 -0800
Subject: [PATCH 13/33] lint

---
 blocks/header/header.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 502f7a4f..631224d5 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -274,7 +274,6 @@ header nav .nav-tools {
   grid-area: tools;
 }
 
-
 header .breadcrumbs {
   display: none;
   padding: 0 32px;
@@ -290,7 +289,7 @@ header .breadcrumbs ol {
   display: flex;
   flex-flow: wrap;
   list-style: none;
-  padding: 0 0;
+  padding: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -298,7 +297,7 @@ header .breadcrumbs ol {
 header .breadcrumbs ol li {
   padding-right: 8px;
   padding-inline-start: 0;
-  opacity: 50%;
+  opacity: 0.5;
 }
 
 header .breadcrumbs ol li:not(:last-child)::after {
@@ -311,7 +310,7 @@ header .breadcrumbs ol li a:any-link {
 }
 
 header .breadcrumbs ol li:last-of-type {
-  opacity: 100%;
+  opacity: 1;
 }
 
 @media screen and (min-width: 900px) {

From 54a26f677aba66d035c6dd85c4c0597caec97792 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 12:14:13 -0800
Subject: [PATCH 14/33] use placeholder

---
 blocks/header/header.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index ffe3ebb9..c54f67b8 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,9 +1,11 @@
-import { getMetadata } from '../../scripts/aem.js';
+import { fetchPlaceholders, getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
 // media query match that indicates mobile/tablet width
 const isDesktop = window.matchMedia('(min-width: 900px)');
 
+let placeholders;
+
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
     const nav = document.getElementById('nav');
@@ -97,7 +99,7 @@ function getDirectTextContent(menuItem) {
     .join(' ');
 }
 
-function buildBreadcrumbsFromNavTree(nav, currentUrl) {
+async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
   const crumbs = [];
 
   let menuItem = Array.from(nav.querySelectorAll('a')).find((a) => a.href === currentUrl);
@@ -111,19 +113,20 @@ function buildBreadcrumbsFromNavTree(nav, currentUrl) {
     crumbs.unshift({ title: getMetadata('og:title'), url: currentUrl });
   }
 
+  const homePlaceholder = placeholders.breadcrumbsHomeLabel || 'Home';
   const homeUrl = document.querySelector('.nav-brand a').href;
-  crumbs.unshift({ title: 'Home', url: homeUrl });
+  crumbs.unshift({ title: homePlaceholder, url: homeUrl });
 
   // last link is current page and should not be linked
   crumbs[crumbs.length - 1].url = null;
   return crumbs;
 }
 
-function buildBreadcrumbs() {
+async function buildBreadcrumbs() {
   const breadcrumbs = document.createElement('div');
   breadcrumbs.className = 'breadcrumbs';
 
-  const crumbs = buildBreadcrumbsFromNavTree(document.querySelector('.nav-sections'), document.location.href);
+  const crumbs = await buildBreadcrumbsFromNavTree(document.querySelector('.nav-sections'), document.location.href);
 
   const ol = document.createElement('ol');
   ol.append(...crumbs.map((item) => {
@@ -148,6 +151,7 @@ function buildBreadcrumbs() {
  * @param {Element} block The header block element
  */
 export default async function decorate(block) {
+  placeholders = await fetchPlaceholders();
   // load nav as fragment
   const navMeta = getMetadata('nav');
   const navPath = navMeta ? new URL(navMeta).pathname : '/nav';
@@ -205,6 +209,6 @@ export default async function decorate(block) {
 
   if (getMetadata('breadcrumbs').toLowerCase() === 'true') {
     document.body.classList.add('breadcrumbs-enabled');
-    navWrapper.append(buildBreadcrumbs());
+    navWrapper.append(await buildBreadcrumbs());
   }
 }

From e129c74be010b40307e6bb81fe45b69506b9d984 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 12:21:31 -0800
Subject: [PATCH 15/33] lint

---
 blocks/header/header.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 631224d5..415bdc2d 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -274,6 +274,7 @@ header nav .nav-tools {
   grid-area: tools;
 }
 
+/* breadcrumbs */
 header .breadcrumbs {
   display: none;
   padding: 0 32px;
@@ -294,6 +295,7 @@ header .breadcrumbs ol {
   margin-bottom: 0;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 header .breadcrumbs ol li {
   padding-right: 8px;
   padding-inline-start: 0;

From 33db6f2af62f39356e090177d30d16478f87ae79 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 12:27:29 -0800
Subject: [PATCH 16/33] improve contrast for accessibility

---
 blocks/header/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 415bdc2d..4e2b4f6a 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -299,7 +299,7 @@ header .breadcrumbs ol {
 header .breadcrumbs ol li {
   padding-right: 8px;
   padding-inline-start: 0;
-  opacity: 0.5;
+  opacity: 0.7;
 }
 
 header .breadcrumbs ol li:not(:last-child)::after {

From 6c8b771502d10687d490d0a3efc596dc2d8b4aac Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 12:29:25 -0800
Subject: [PATCH 17/33] lint

---
 styles/styles.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index bcb84e27..4c0c3d92 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -42,7 +42,6 @@
   --breadcrumbs-height: 50px;
   --header-height: var(--nav-height);
   --breadcrumbs-font-size: 14px;
-
 }
 
 @font-face {
@@ -73,7 +72,6 @@ body {
   display: none;
 }
 
-
 @media screen and (min-width: 900px) {
   body.breadcrumbs-enabled {
     --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));

From a05262b277402febc38a4de763bd68a27e816ebf Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <synox@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:36:49 -0800
Subject: [PATCH 18/33] Update blocks/header/header.css

Co-authored-by: Katie Sexton <ksexton@adobe.com>
---
 blocks/header/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 4e2b4f6a..b2f29e0a 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -304,7 +304,7 @@ header .breadcrumbs ol li {
 
 header .breadcrumbs ol li:not(:last-child)::after {
   content: "/";
-  padding-left: 8px;
+  padding-left: 1ch;
 }
 
 header .breadcrumbs ol li a:any-link {

From 5c90a6ecb935a967b079e06c99b2c1e94f204f9d Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <synox@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:37:28 -0800
Subject: [PATCH 19/33] Update blocks/header/header.js

Co-authored-by: Katie Sexton <ksexton@adobe.com>
---
 blocks/header/header.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index c54f67b8..bdb49140 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -119,6 +119,7 @@ async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
 
   // last link is current page and should not be linked
   crumbs[crumbs.length - 1].url = null;
+  crumbs[crumbs.length - 1].setAttribute('aria-current', 'page');
   return crumbs;
 }
 

From 1ff3dcd539bbf390f9682030c1fcde192d5ee6c3 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <synox@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:37:42 -0800
Subject: [PATCH 20/33] Update blocks/header/header.css

Co-authored-by: Katie Sexton <ksexton@adobe.com>
---
 blocks/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index b2f29e0a..236fdb84 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -293,6 +293,7 @@ header .breadcrumbs ol {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
+  gap: 1ch;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */

From c72dd202b35c0c21318b8b1971372a61a29470e6 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <synox@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:38:01 -0800
Subject: [PATCH 21/33] Update blocks/header/header.css

Co-authored-by: Katie Sexton <ksexton@adobe.com>
---
 blocks/header/header.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 236fdb84..2fb52450 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -298,7 +298,6 @@ header .breadcrumbs ol {
 
 /* stylelint-disable-next-line no-descending-specificity */
 header .breadcrumbs ol li {
-  padding-right: 8px;
   padding-inline-start: 0;
   opacity: 0.7;
 }

From ed76d3a5c8db0876606fd6a5f473fe38cb985458 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <synox@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:38:08 -0800
Subject: [PATCH 22/33] Update blocks/header/header.js

Co-authored-by: Katie Sexton <ksexton@adobe.com>
---
 blocks/header/header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index bdb49140..81081401 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -124,7 +124,7 @@ async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
 }
 
 async function buildBreadcrumbs() {
-  const breadcrumbs = document.createElement('div');
+  const breadcrumbs = document.createElement('nav');
   breadcrumbs.className = 'breadcrumbs';
 
   const crumbs = await buildBreadcrumbsFromNavTree(document.querySelector('.nav-sections'), document.location.href);

From 9bc57bdbe961b9bcec5dda8168a8c5d9cdeaf188 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 15:44:07 -0800
Subject: [PATCH 23/33] avoid layout shift

---
 blocks/header/header.js | 1 -
 scripts/scripts.js      | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index c54f67b8..acbc38f8 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -208,7 +208,6 @@ export default async function decorate(block) {
   block.append(navWrapper);
 
   if (getMetadata('breadcrumbs').toLowerCase() === 'true') {
-    document.body.classList.add('breadcrumbs-enabled');
     navWrapper.append(await buildBreadcrumbs());
   }
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 0211c1dd..82e1b66e 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -11,6 +11,7 @@ import {
   waitForLCP,
   loadBlocks,
   loadCSS,
+  getMetadata,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
@@ -76,6 +77,9 @@ export function decorateMain(main) {
 async function loadEager(doc) {
   document.documentElement.lang = 'en';
   decorateTemplateAndTheme();
+  if (getMetadata('breadcrumbs').toLowerCase() === 'true') {
+    document.body.classList.add('breadcrumbs-enabled');
+  }
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);

From 294584bac5aa8484ab7e05d13b1fcfd61a68af22 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 15:49:19 -0800
Subject: [PATCH 24/33] fix: aria-current=page

---
 blocks/header/header.js | 3 ++-
 styles/styles.css       | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 4f39b555..47280466 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -119,7 +119,7 @@ async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
 
   // last link is current page and should not be linked
   crumbs[crumbs.length - 1].url = null;
-  crumbs[crumbs.length - 1].setAttribute('aria-current', 'page');
+  crumbs[crumbs.length - 1]['aria-current'] = 'page';
   return crumbs;
 }
 
@@ -132,6 +132,7 @@ async function buildBreadcrumbs() {
   const ol = document.createElement('ol');
   ol.append(...crumbs.map((item) => {
     const li = document.createElement('li');
+    if (item['aria-current']) li.setAttribute('aria-current', item['aria-current']);
     if (item.url) {
       const a = document.createElement('a');
       a.href = item.url;
diff --git a/styles/styles.css b/styles/styles.css
index 4c0c3d92..d256d9f1 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -39,7 +39,7 @@
 
   /* header */
   --nav-height: 64px;
-  --breadcrumbs-height: 50px;
+  --breadcrumbs-height: 35px;
   --header-height: var(--nav-height);
   --breadcrumbs-font-size: 14px;
 }

From 175ce5e5f32574ecb63cb41884aa578b7fdb6678 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 15:52:01 -0800
Subject: [PATCH 25/33] fix: only apply nav styles to main navigation

---
 blocks/header/header.css | 86 ++++++++++++++++++++--------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 2fb52450..7a00c732 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -6,7 +6,7 @@ header .nav-wrapper {
   position: fixed;
 }
 
-header nav {
+header nav#nav {
   box-sizing: border-box;
   display: grid;
   grid-template:
@@ -21,7 +21,7 @@ header nav {
   font-family: var(--body-font-family);
 }
 
-header nav[aria-expanded="true"] {
+header nav#nav[aria-expanded="true"] {
   grid-template:
     "hamburger brand" var(--nav-height)
     "sections sections" 1fr
@@ -31,41 +31,41 @@ header nav[aria-expanded="true"] {
 }
 
 @media (width >= 600px) {
-  header nav {
+  header nav#nav {
     padding: 0 2rem;
   }
 }
 
 @media (width >= 900px) {
-  header nav {
+  header nav#nav {
     display: flex;
     justify-content: space-between;
   }
 
-  header nav[aria-expanded="true"] {
+  header nav#nav[aria-expanded="true"] {
     min-height: 0;
     overflow: visible;
   }
 }
 
-header nav p {
+header nav#nav p {
   margin: 0;
   line-height: 1;
 }
 
-header nav a:any-link {
+header nav#nav a:any-link {
   color: currentcolor;
 }
 
 /* hamburger */
-header nav .nav-hamburger {
+header nav#nav .nav-hamburger {
   grid-area: hamburger;
   height: 22px;
   display: flex;
   align-items: center;
 }
 
-header nav .nav-hamburger button {
+header nav#nav .nav-hamburger button {
   height: 22px;
   margin: 0;
   border: 0;
@@ -78,44 +78,44 @@ header nav .nav-hamburger button {
   white-space: initial;
 }
 
-header nav .nav-hamburger-icon,
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
+header nav#nav .nav-hamburger-icon,
+header nav#nav .nav-hamburger-icon::before,
+header nav#nav .nav-hamburger-icon::after {
   box-sizing: border-box;
   display: block;
   position: relative;
   width: 20px;
 }
 
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
+header nav#nav .nav-hamburger-icon::before,
+header nav#nav .nav-hamburger-icon::after {
   content: "";
   position: absolute;
   background: currentcolor;
 }
 
-header nav[aria-expanded="false"] .nav-hamburger-icon,
-header nav[aria-expanded="false"] .nav-hamburger-icon::before,
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
+header nav#nav[aria-expanded="false"] .nav-hamburger-icon,
+header nav#nav[aria-expanded="false"] .nav-hamburger-icon::before,
+header nav#nav[aria-expanded="false"] .nav-hamburger-icon::after {
   height: 2px;
   border-radius: 2px;
   background: currentcolor;
 }
 
-header nav[aria-expanded="false"] .nav-hamburger-icon::before {
+header nav#nav[aria-expanded="false"] .nav-hamburger-icon::before {
   top: -6px;
 }
 
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
+header nav#nav[aria-expanded="false"] .nav-hamburger-icon::after {
   top: 6px;
 }
 
-header nav[aria-expanded="true"] .nav-hamburger-icon {
+header nav#nav[aria-expanded="true"] .nav-hamburger-icon {
   height: 22px;
 }
 
-header nav[aria-expanded="true"] .nav-hamburger-icon::before,
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
+header nav#nav[aria-expanded="true"] .nav-hamburger-icon::before,
+header nav#nav[aria-expanded="true"] .nav-hamburger-icon::after {
   top: 3px;
   left: 1px;
   transform: rotate(45deg);
@@ -125,14 +125,14 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
   border-radius: 2px;
 }
 
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
+header nav#nav[aria-expanded="true"] .nav-hamburger-icon::after {
   top: unset;
   bottom: 3px;
   transform: rotate(-45deg);
 }
 
 @media (width >= 900px) {
-  header nav .nav-hamburger {
+  header nav#nav .nav-hamburger {
     display: none;
     visibility: hidden;
   }
@@ -147,63 +147,63 @@ header .nav-brand {
   line-height: 1;
 }
 
-header nav .nav-brand img {
+header nav#nav .nav-brand img {
   width: 128px;
   height: auto;
 }
 
 /* sections */
-header nav .nav-sections {
+header nav#nav .nav-sections {
   grid-area: sections;
   flex: 1 1 auto;
   display: none;
   visibility: hidden;
 }
 
-header nav[aria-expanded="true"] .nav-sections {
+header nav#nav[aria-expanded="true"] .nav-sections {
   display: block;
   visibility: visible;
   align-self: start;
 }
 
-header nav .nav-sections ul {
+header nav#nav .nav-sections ul {
   list-style: none;
   padding-left: 0;
   font-size: var(--body-font-size-s);
   font-weight: 500;
 }
 
-header nav .nav-sections ul > li {
+header nav#nav .nav-sections ul > li {
   font-weight: 700;
 }
 
-header nav .nav-sections ul > li > ul {
+header nav#nav .nav-sections ul > li > ul {
   margin-top: 0;
 }
 
-header nav .nav-sections ul > li > ul > li {
+header nav#nav .nav-sections ul > li > ul > li {
   font-weight: 500;
 }
 
 @media (width >= 900px) {
-  header nav .nav-sections {
+  header nav#nav .nav-sections {
     display: block;
     visibility: visible;
     white-space: nowrap;
   }
 
-  header nav[aria-expanded="true"] .nav-sections {
+  header nav#nav[aria-expanded="true"] .nav-sections {
     align-self: unset;
   }
 
-  header nav .nav-sections .nav-drop {
+  header nav#nav .nav-sections .nav-drop {
     position: relative;
     padding-right: 16px;
     cursor: pointer;
     z-index: 10;
   }
 
-  header nav .nav-sections .nav-drop::after {
+  header nav#nav .nav-sections .nav-drop::after {
     content: "";
     display: inline-block;
     position: absolute;
@@ -217,31 +217,31 @@ header nav .nav-sections ul > li > ul > li {
     border-width: 2px 2px 0 0;
   }
 
-  header nav .nav-sections .nav-drop[aria-expanded="true"]::after {
+  header nav#nav .nav-sections .nav-drop[aria-expanded="true"]::after {
     top: unset;
     bottom: 0.5em;
     transform: rotate(315deg);
   }
 
-  header nav .nav-sections ul {
+  header nav#nav .nav-sections ul {
     display: flex;
     gap: 2em;
     margin: 0;
     font-size: var(--body-font-size-xs);
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li {
+  header nav#nav .nav-sections .default-content-wrapper > ul > li {
     flex: 0 1 auto;
     position: relative;
     font-weight: 500;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul {
+  header nav#nav .nav-sections .default-content-wrapper > ul > li > ul {
     display: none;
     position: relative;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
+  header nav#nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
     display: block;
     position: absolute;
     left: -1em;
@@ -252,7 +252,7 @@ header nav .nav-sections ul > li > ul > li {
     white-space: initial;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
+  header nav#nav .nav-sections .default-content-wrapper > ul > li > ul::before {
     content: "";
     position: absolute;
     top: -8px;
@@ -264,13 +264,13 @@ header nav .nav-sections ul > li > ul > li {
     border-bottom: 8px solid var(--light-color);
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
+  header nav#nav .nav-sections .default-content-wrapper > ul > li > ul > li {
     padding: 8px 0;
   }
 }
 
 /* tools */
-header nav .nav-tools {
+header nav#nav .nav-tools {
   grid-area: tools;
 }
 

From c50e1c70ec4035881119b1f2572a34fa65ebaf67 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 15:53:37 -0800
Subject: [PATCH 26/33] fix: lint

---
 blocks/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 7a00c732..1d1ee6a8 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -307,6 +307,7 @@ header .breadcrumbs ol li:not(:last-child)::after {
   padding-left: 1ch;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 header .breadcrumbs ol li a:any-link {
   color: var(--text-color);
 }

From eb7421cadd12fe8d17ae70e58d0f60e2fe2cab73 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 15:56:13 -0800
Subject: [PATCH 27/33] refactor: run fetchPlaceholders

---
 blocks/header/header.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 47280466..238a3ab6 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -4,8 +4,6 @@ import { loadFragment } from '../fragment/fragment.js';
 // media query match that indicates mobile/tablet width
 const isDesktop = window.matchMedia('(min-width: 900px)');
 
-let placeholders;
-
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
     const nav = document.getElementById('nav');
@@ -113,6 +111,7 @@ async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
     crumbs.unshift({ title: getMetadata('og:title'), url: currentUrl });
   }
 
+  const placeholders = await fetchPlaceholders();
   const homePlaceholder = placeholders.breadcrumbsHomeLabel || 'Home';
   const homeUrl = document.querySelector('.nav-brand a').href;
   crumbs.unshift({ title: homePlaceholder, url: homeUrl });
@@ -153,7 +152,6 @@ async function buildBreadcrumbs() {
  * @param {Element} block The header block element
  */
 export default async function decorate(block) {
-  placeholders = await fetchPlaceholders();
   // load nav as fragment
   const navMeta = getMetadata('nav');
   const navPath = navMeta ? new URL(navMeta).pathname : '/nav';

From 6579ec82c8cfc05845db0ab162f95d302a21e99d Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 15:57:55 -0800
Subject: [PATCH 28/33] fix: lint

---
 blocks/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 1d1ee6a8..1149059b 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -312,6 +312,7 @@ header .breadcrumbs ol li a:any-link {
   color: var(--text-color);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 header .breadcrumbs ol li:last-of-type {
   opacity: 1;
 }

From b96608d6e25444c2bdb489b78d8753de44fd3ded Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 16:31:23 -0800
Subject: [PATCH 29/33] enable hover

---
 blocks/header/header.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 238a3ab6..716a85ad 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -179,13 +179,36 @@ export default async function decorate(block) {
   if (navSections) {
     navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
       if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
-      navSection.addEventListener('click', () => {
+
+      function closeMenuSection(event) {
+        if (!nav.contains(event.target)) {
+          const expanded = navSection.getAttribute('aria-expanded') === 'true';
+          if (expanded) {
+            navSection.setAttribute('aria-expanded', 'false');
+          }
+        }
+      }
+
+      const openMenu = () => {
         if (isDesktop.matches) {
           const expanded = navSection.getAttribute('aria-expanded') === 'true';
+
           toggleAllNavSections(navSections);
           navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
         }
-      });
+      };
+
+      const mouseOverMenu = () => {
+        const expanded = navSection.getAttribute('aria-expanded') === 'true';
+        if (expanded) {
+          return; // it's already open
+        }
+        openMenu();
+      };
+
+      navSection.addEventListener('click', openMenu);
+      navSection.addEventListener('mouseover', mouseOverMenu);
+      document.addEventListener('mouseover', closeMenuSection);
     });
   }
 

From f34d1de6b7ece6135fcca2c3ca1572f5ad0918d7 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 16:34:05 -0800
Subject: [PATCH 30/33] make link clickable area larger

---
 blocks/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 1149059b..99574161 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -55,6 +55,7 @@ header nav#nav p {
 
 header nav#nav a:any-link {
   color: currentcolor;
+  display: block;
 }
 
 /* hamburger */

From 363ff9bfb1b2e8a8cce45999150608d68a7aff56 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Wed, 10 Jan 2024 16:37:35 -0800
Subject: [PATCH 31/33] undo: nav hover

---
 blocks/header/header.js | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 716a85ad..238a3ab6 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -179,36 +179,13 @@ export default async function decorate(block) {
   if (navSections) {
     navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
       if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
-
-      function closeMenuSection(event) {
-        if (!nav.contains(event.target)) {
-          const expanded = navSection.getAttribute('aria-expanded') === 'true';
-          if (expanded) {
-            navSection.setAttribute('aria-expanded', 'false');
-          }
-        }
-      }
-
-      const openMenu = () => {
+      navSection.addEventListener('click', () => {
         if (isDesktop.matches) {
           const expanded = navSection.getAttribute('aria-expanded') === 'true';
-
           toggleAllNavSections(navSections);
           navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
         }
-      };
-
-      const mouseOverMenu = () => {
-        const expanded = navSection.getAttribute('aria-expanded') === 'true';
-        if (expanded) {
-          return; // it's already open
-        }
-        openMenu();
-      };
-
-      navSection.addEventListener('click', openMenu);
-      navSection.addEventListener('mouseover', mouseOverMenu);
-      document.addEventListener('mouseover', closeMenuSection);
+      });
     });
   }
 

From b496201469fd95b0002a2409bc628bf291cdfce5 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Thu, 11 Jan 2024 10:03:27 -0800
Subject: [PATCH 32/33] handle `home` page

---
 blocks/header/header.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/blocks/header/header.js b/blocks/header/header.js
index 238a3ab6..e7a41dcb 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -100,6 +100,8 @@ function getDirectTextContent(menuItem) {
 async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
   const crumbs = [];
 
+  const homeUrl = document.querySelector('.nav-brand a').href;
+
   let menuItem = Array.from(nav.querySelectorAll('a')).find((a) => a.href === currentUrl);
   if (menuItem) {
     do {
@@ -107,17 +109,19 @@ async function buildBreadcrumbsFromNavTree(nav, currentUrl) {
       crumbs.unshift({ title: getDirectTextContent(menuItem), url: link ? link.href : null });
       menuItem = menuItem.closest('ul')?.closest('li');
     } while (menuItem);
-  } else {
+  } else if (currentUrl !== homeUrl) {
     crumbs.unshift({ title: getMetadata('og:title'), url: currentUrl });
   }
 
   const placeholders = await fetchPlaceholders();
   const homePlaceholder = placeholders.breadcrumbsHomeLabel || 'Home';
-  const homeUrl = document.querySelector('.nav-brand a').href;
+
   crumbs.unshift({ title: homePlaceholder, url: homeUrl });
 
   // last link is current page and should not be linked
-  crumbs[crumbs.length - 1].url = null;
+  if (crumbs.length > 1) {
+    crumbs[crumbs.length - 1].url = null;
+  }
   crumbs[crumbs.length - 1]['aria-current'] = 'page';
   return crumbs;
 }

From 8384b09c1c04a38c175eb0d4ed086aad710f5119 Mon Sep 17 00:00:00 2001
From: Aravindo Wingeier <wingeier@adobe.com>
Date: Thu, 11 Jan 2024 14:19:44 -0800
Subject: [PATCH 33/33] fix: merge conflict

---
 blocks/header/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index c14ef025..f11d9f7f 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -193,7 +193,7 @@ header nav#nav .nav-sections ul > li > ul > li {
     white-space: nowrap;
   }
 
-  header nav a:any-link {
+  header nav#nav a:any-link {
     display: block;
   }