From 2bcd9ff4da9bbd1197d3be628bc4f4812b798859 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Wed, 18 Sep 2024 13:51:16 -0700
Subject: [PATCH] Update snapshots

Signed-off-by: Miki <miki@amazon.com>
---
 .../__snapshots__/breadcrumbs.test.tsx.snap   |  90 +-
 .../breadcrumbs_simplified.test.tsx.snap      | 758 --------------
 .../simplified_breadcrumbs.test.tsx.snap      | 926 ++++++++++++++++++
 .../header_breadcrumbs.test.tsx.snap          | 110 ++-
 4 files changed, 1027 insertions(+), 857 deletions(-)
 delete mode 100644 src/components/breadcrumbs/__snapshots__/breadcrumbs_simplified.test.tsx.snap
 create mode 100644 src/components/breadcrumbs/simplified_breadcrumbs/__snapshots__/simplified_breadcrumbs.test.tsx.snap

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
index df151988d3..a95aaed7d7 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -121,34 +121,27 @@ exports[`OuiBreadcrumbs props max doesn't break when max exceeds the number of b
     </span>
   </div>
   <div
-    class="ouiBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiBreadcrumb"
-    >
-      Chordates
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--truncate"
-  >
-    <span
-      aria-current="false"
-      class="ouiBreadcrumb ouiBreadcrumb--truncate"
-    >
-      Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbWrapper"
+    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--collapsed"
   >
-    <span
-      aria-current="false"
-      class="ouiBreadcrumb"
+    <div
+      class="ouiPopover ouiPopover--anchorDownCenter ouiBreadcrumb ouiBreadcrumb--collapsed"
     >
-      Tetrapods
-    </span>
+      <div
+        class="ouiPopover__anchor"
+      >
+        <button
+          aria-label="Show collapsed breadcrumbs"
+          class="ouiLink ouiLink--subdued ouiBreadcrumb__collapsedLink"
+          title="Show collapsed breadcrumbs"
+          type="button"
+        >
+          … 
+          <span
+            data-ouiicon-type="arrowDown"
+          />
+        </button>
+      </div>
+    </div>
   </div>
   <div
     class="ouiBreadcrumbWrapper"
@@ -257,34 +250,27 @@ exports[`OuiBreadcrumbs props max renders all items with null 1`] = `
     </span>
   </div>
   <div
-    class="ouiBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiBreadcrumb"
-    >
-      Chordates
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--truncate"
-  >
-    <span
-      aria-current="false"
-      class="ouiBreadcrumb ouiBreadcrumb--truncate"
-    >
-      Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbWrapper"
+    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--collapsed"
   >
-    <span
-      aria-current="false"
-      class="ouiBreadcrumb"
+    <div
+      class="ouiPopover ouiPopover--anchorDownCenter ouiBreadcrumb ouiBreadcrumb--collapsed"
     >
-      Tetrapods
-    </span>
+      <div
+        class="ouiPopover__anchor"
+      >
+        <button
+          aria-label="Show collapsed breadcrumbs"
+          class="ouiLink ouiLink--subdued ouiBreadcrumb__collapsedLink"
+          title="Show collapsed breadcrumbs"
+          type="button"
+        >
+          … 
+          <span
+            data-ouiicon-type="arrowDown"
+          />
+        </button>
+      </div>
+    </div>
   </div>
   <div
     class="ouiBreadcrumbWrapper"
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs_simplified.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs_simplified.test.tsx.snap
deleted file mode 100644
index 11bda4ba70..0000000000
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs_simplified.test.tsx.snap
+++ /dev/null
@@ -1,758 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OuiSimplifiedBreadcrumbs is rendered 1`] = `
-<nav
-  aria-label="aria-label"
-  class="ouiSimplifiedBreadcrumbs testClass1 testClass2 ouiSimplifiedBreadcrumbs--truncate"
-  data-test-subj="test subject string"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Metazoans
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--collapsed"
-  >
-    <div
-      class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
-    >
-      <div
-        class="ouiPopover__anchor"
-      >
-        <button
-          aria-label="Show collapsed breadcrumbs"
-          class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb__collapsedLink"
-          title="Show collapsed breadcrumbs"
-          type="button"
-        >
-          … 
-          <span
-            data-ouiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-      href="#"
-      rel="noreferrer"
-    >
-      Boa constrictor
-    </a>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props max doesn't break when max exceeds the number of breadcrumbs 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Metazoans
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Chordates
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-    >
-      Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Tetrapods
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-      href="#"
-      rel="noreferrer"
-    >
-      Boa constrictor
-    </a>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props max renders 1 item 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--collapsed"
-  >
-    <div
-      class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
-    >
-      <div
-        class="ouiPopover__anchor"
-      >
-        <button
-          aria-label="Show collapsed breadcrumbs"
-          class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb__collapsedLink"
-          title="Show collapsed breadcrumbs"
-          type="button"
-        >
-          … 
-          <span
-            data-ouiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props max renders all items with null 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Metazoans
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Chordates
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-    >
-      Nebulosa subspecies is also a real mouthful, especially for creatures without mouths
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Tetrapods
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-      href="#"
-      rel="noreferrer"
-    >
-      Boa constrictor
-    </a>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props responsive is rendered 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Metazoans
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--collapsed"
-  >
-    <div
-      class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
-    >
-      <div
-        class="ouiPopover__anchor"
-      >
-        <button
-          aria-label="Show collapsed breadcrumbs"
-          class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb__collapsedLink"
-          title="Show collapsed breadcrumbs"
-          type="button"
-        >
-          … 
-          <span
-            data-ouiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-      href="#"
-      rel="noreferrer"
-    >
-      Boa constrictor
-    </a>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props responsive is rendered as false 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Metazoans
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--collapsed"
-  >
-    <div
-      class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
-    >
-      <div
-        class="ouiPopover__anchor"
-      >
-        <button
-          aria-label="Show collapsed breadcrumbs"
-          class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb__collapsedLink"
-          title="Show collapsed breadcrumbs"
-          type="button"
-        >
-          … 
-          <span
-            data-ouiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-      href="#"
-      rel="noreferrer"
-    >
-      Boa constrictor
-    </a>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props responsive is rendered with custom breakpoints 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--collapsed"
-  >
-    <div
-      class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
-    >
-      <div
-        class="ouiPopover__anchor"
-      >
-        <button
-          aria-label="Show collapsed breadcrumbs"
-          class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb__collapsedLink"
-          title="Show collapsed breadcrumbs"
-          type="button"
-        >
-          … 
-          <span
-            data-ouiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
-
-exports[`OuiSimplifiedBreadcrumbs props truncate as false is rendered 1`] = `
-<nav
-  aria-label="breadcrumb"
-  class="ouiSimplifiedBreadcrumbs"
->
-  <div
-    class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <span
-      aria-current="false"
-      class="ouiSimplifiedBreadcrumb"
-    >
-      Metazoans
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--collapsed"
-  >
-    <div
-      class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
-    >
-      <div
-        class="ouiPopover__anchor"
-      >
-        <button
-          aria-label="Show collapsed breadcrumbs"
-          class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb__collapsedLink"
-          title="Show collapsed breadcrumbs"
-          type="button"
-        >
-          … 
-          <span
-            data-ouiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--truncate"
-  >
-    <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
-      href="#"
-      rel="noreferrer"
-    >
-      Boa constrictor
-    </a>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
-  >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-</nav>
-`;
diff --git a/src/components/breadcrumbs/simplified_breadcrumbs/__snapshots__/simplified_breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/simplified_breadcrumbs/__snapshots__/simplified_breadcrumbs.test.tsx.snap
new file mode 100644
index 0000000000..91af453c00
--- /dev/null
+++ b/src/components/breadcrumbs/simplified_breadcrumbs/__snapshots__/simplified_breadcrumbs.test.tsx.snap
@@ -0,0 +1,926 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OuiSimplifiedBreadcrumbs is rendered 1`] = `
+<nav
+  aria-label="aria-label"
+  class="ouiSimplifiedBreadcrumbs testClass1 testClass2 ouiSimplifiedBreadcrumbs--truncate"
+  data-test-subj="test subject string"
+>
+  <div
+    class="ouiSimplifiedBreadcrumbWall"
+  >
+    <a
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
+      href="#"
+      rel="noreferrer"
+    >
+      Animals
+    </a>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Metazoans
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props max doesn't break when max exceeds the number of breadcrumbs 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
+>
+  <div
+    class="ouiSimplifiedBreadcrumbWall"
+  >
+    <a
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
+      href="#"
+      rel="noreferrer"
+    >
+      Animals
+    </a>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Metazoans
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Chordates
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props max renders 1 item 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
+>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props max renders all items with null 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
+>
+  <div
+    class="ouiSimplifiedBreadcrumbWall"
+  >
+    <a
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
+      href="#"
+      rel="noreferrer"
+    >
+      Animals
+    </a>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Metazoans
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Chordates
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props responsive is rendered 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
+>
+  <div
+    class="ouiSimplifiedBreadcrumbWall"
+  >
+    <a
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
+      href="#"
+      rel="noreferrer"
+    >
+      Animals
+    </a>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Metazoans
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props responsive is rendered as false 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
+>
+  <div
+    class="ouiSimplifiedBreadcrumbWall"
+  >
+    <a
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
+      href="#"
+      rel="noreferrer"
+    >
+      Animals
+    </a>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Metazoans
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props responsive is rendered with custom breakpoints 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs ouiSimplifiedBreadcrumbs--truncate"
+>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
+
+exports[`OuiSimplifiedBreadcrumbs props truncate as false is rendered 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="ouiSimplifiedBreadcrumbs"
+>
+  <div
+    class="ouiSimplifiedBreadcrumbWall"
+  >
+    <a
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
+      href="#"
+      rel="noreferrer"
+    >
+      Animals
+    </a>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="false"
+    class="ouiSimplifiedBreadcrumb"
+  >
+    Metazoans
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    class="ouiPopover ouiPopover--anchorDownCenter ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--collapsed"
+  >
+    <div
+      class="ouiPopover__anchor"
+    >
+      <button
+        aria-label="Show collapsed breadcrumbs"
+        class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb__collapsedLink"
+        title="Show collapsed breadcrumbs"
+        type="button"
+      >
+        … 
+        <span
+          data-ouiicon-type="arrowDown"
+        />
+      </button>
+    </div>
+  </div>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--truncate"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+</nav>
+`;
diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
index 30a6a59e29..f5d2115a22 100644
--- a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -64,62 +64,78 @@ exports[`OuiHeaderBreadcrumbs is rendered with simplified breadcrumbs 1`] = `
 >
   <div
     class="ouiSimplifiedBreadcrumbWall"
-  >
-    <div
-      class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--first"
-    >
-      <a
-        class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb customClass"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </div>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
-  >
-    <button
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
-      type="button"
-    >
-      Reptiles
-    </button>
-  </div>
-  <div
-    class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper"
   >
     <a
-      class="ouiLink ouiLink--subdued ouiSimplifiedBreadcrumb"
+      class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb customClass"
+      data-test-subj="breadcrumbsAnimals"
       href="#"
       rel="noreferrer"
     >
-      Boa constrictor
+      Animals
     </a>
   </div>
-  <div
+  <svg
     class="ouiBreadcrumbSeparator"
-  />
-  <div
-    class="ouiSimplifiedBreadcrumbWrapper ouiSimplifiedBreadcrumbWrapper--last"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <span
-      aria-current="page"
-      class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
-    >
-      Edit
-    </span>
-  </div>
-  <div
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <button
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    type="button"
+  >
+    Reptiles
+  </button>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <a
+    class="ouiLink ouiLink--primary ouiSimplifiedBreadcrumb"
+    href="#"
+    rel="noreferrer"
+  >
+    Boa constrictor
+  </a>
+  <svg
     class="ouiBreadcrumbSeparator"
-  />
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    aria-current="page"
+    class="ouiSimplifiedBreadcrumb ouiSimplifiedBreadcrumb--last"
+  >
+    Edit
+  </span>
+  <svg
+    class="ouiBreadcrumbSeparator"
+    preserveAspectRatio="none"
+    viewBox="0 0 8 12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 12H0L6 0h2z"
+      fill="currentColor"
+    />
+  </svg>
 </nav>
 `;