diff --git a/src/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/src/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
new file mode 100644
index 000000000..e9a90373d
--- /dev/null
+++ b/src/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -0,0 +1,405 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumb renders correctly 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c1:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.c6 {
+  display: inline;
+}
+
+.c5 {
+  margin-bottom: 0.2rem;
+}
+
+.c4 {
+  list-style: unset;
+  list-style-type: none;
+}
+
+.c4:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.c4 .c3 {
+  margin-left: 1rem;
+}
+
+.c4 {
+  list-style-type: decimal;
+}
+
+.c4 .c3 {
+  list-style-type: lower-alpha;
+}
+
+.c4 .c3 .c3 {
+  list-style-type: lower-roman;
+}
+
+.c4 li {
+  display: inline-block;
+  margin-right: 1rem;
+  margin-bottom: unset;
+}
+
+.c0 li + li::before {
+  border-right-color: #708da8;
+  border-right-style: solid;
+  border-right-width: 0.125rem;
+  content: '';
+  display: inline-block;
+  height: 0.8rem;
+  margin: 0 1rem;
+  -webkit-msrgin-right: 0;
+  -moz-msrgin-right: 0;
+  -ms-msrgin-right: 0;
+  msrgin-right: 0;
+  -webkit-transform: rotate(15deg);
+  -ms-transform: rotate(15deg);
+  transform: rotate(15deg);
+}
+
+.c0 [aria-current='page'] {
+  font-weight: 600;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c2 li {
+  margin-right: 0;
+}
+
+<nav
+  aria-label="Breadcrumb"
+  class="c0 c1"
+>
+  <ol
+    class="c2 c3 c4 c1"
+  >
+    <li
+      class="c5 c1"
+    >
+      <span
+        class="c6 c1"
+      >
+        Home
+      </span>
+    </li>
+    <li
+      class="c5 c1"
+    >
+      <span
+        class="c6 c1"
+      >
+        Breadcrumb
+      </span>
+    </li>
+    <li
+      class="c5 c1"
+    >
+      <span
+        aria-current="page"
+        class="c6 c1"
+      >
+        Basic Usage
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumb with custom separationColor renders correctly 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c1:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.c6 {
+  display: inline;
+}
+
+.c5 {
+  margin-bottom: 0.2rem;
+}
+
+.c4 {
+  list-style: unset;
+  list-style-type: none;
+}
+
+.c4:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.c4 .c3 {
+  margin-left: 1rem;
+}
+
+.c4 {
+  list-style-type: decimal;
+}
+
+.c4 .c3 {
+  list-style-type: lower-alpha;
+}
+
+.c4 .c3 .c3 {
+  list-style-type: lower-roman;
+}
+
+.c4 li {
+  display: inline-block;
+  margin-right: 1rem;
+  margin-bottom: unset;
+}
+
+.c0 li + li::before {
+  border-right-color: #708da8;
+  border-right-style: solid;
+  border-right-width: 0.125rem;
+  content: '';
+  display: inline-block;
+  height: 0.8rem;
+  margin: 0 1rem;
+  -webkit-msrgin-right: 0;
+  -moz-msrgin-right: 0;
+  -ms-msrgin-right: 0;
+  msrgin-right: 0;
+  -webkit-transform: rotate(15deg);
+  -ms-transform: rotate(15deg);
+  transform: rotate(15deg);
+}
+
+.c0 [aria-current='page'] {
+  font-weight: 600;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c2 li {
+  margin-right: 0;
+}
+
+<nav
+  aria-label="Breadcrumb"
+  class="c0 c1"
+>
+  <ol
+    class="c2 c3 c4 c1"
+  >
+    <li
+      class="c5 c1"
+    >
+      <span
+        class="c6 c1"
+      >
+        Home
+      </span>
+    </li>
+    <li
+      class="c5 c1"
+    >
+      <span
+        class="c6 c1"
+      >
+        Breadcrumb
+      </span>
+    </li>
+    <li
+      class="c5 c1"
+    >
+      <span
+        aria-current="page"
+        class="c6 c1"
+      >
+        Basic Usage
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumb with link renders correctly 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c1:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.c7 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: #444bc9;
+}
+
+.c7:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.c5 {
+  margin-bottom: 0.2rem;
+}
+
+.c4 {
+  list-style: unset;
+  list-style-type: none;
+}
+
+.c4:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.c4 .c3 {
+  margin-left: 1rem;
+}
+
+.c4 {
+  list-style-type: decimal;
+}
+
+.c4 .c3 {
+  list-style-type: lower-alpha;
+}
+
+.c4 .c3 .c3 {
+  list-style-type: lower-roman;
+}
+
+.c4 li {
+  display: inline-block;
+  margin-right: 1rem;
+  margin-bottom: unset;
+}
+
+.c6 {
+  color: #444bc9;
+  fill: #444bc9;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  -webkit-text-decoration-skip: ink edges;
+  text-decoration-skip: ink edges;
+}
+
+.c6:hover {
+  color: #03040b;
+  fill: #03040b;
+}
+
+.c6 .c8 {
+  top: 0.15em;
+}
+
+.c0 li + li::before {
+  border-right-color: #708da8;
+  border-right-style: solid;
+  border-right-width: 0.125rem;
+  content: '';
+  display: inline-block;
+  height: 0.8rem;
+  margin: 0 1rem;
+  -webkit-msrgin-right: 0;
+  -moz-msrgin-right: 0;
+  -ms-msrgin-right: 0;
+  msrgin-right: 0;
+  -webkit-transform: rotate(15deg);
+  -ms-transform: rotate(15deg);
+  transform: rotate(15deg);
+}
+
+.c0 [aria-current='page'] {
+  font-weight: 600;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c2 li {
+  margin-right: 0;
+}
+
+<nav
+  aria-label="Breadcrumb"
+  class="c0 c1"
+>
+  <ol
+    class="c2 c3 c4 c1"
+  >
+    <li
+      class="c5 c1"
+    >
+      <a
+        class="c6 c7"
+        href="/home"
+      >
+        Home
+      </a>
+    </li>
+    <li
+      class="c5 c1"
+    >
+      <a
+        class="c6 c7"
+        href="/breadcrumb"
+      >
+        Breadcrumb
+      </a>
+    </li>
+    <li
+      class="c5 c1"
+    >
+      <a
+        aria-current="page"
+        class="c6 c7"
+        href="/usage"
+      >
+        Basic Usage
+      </a>
+    </li>
+  </ol>
+</nav>
+`;