diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
index a82f885a313..14c9d86fc38 100644
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
@@ -4,11 +4,226 @@ import { configs, test } from '@utils/test/playwright';
 configs().forEach(({ config, screenshot, title }) => {
   test.describe(title('breadcrumbs: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/breadcrumbs/test/basic`, config);
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb>Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
 
-      await page.setIonViewport();
+      const breadcrumbs = page.locator('ion-breadcrumbs');
 
-      await expect(page).toHaveScreenshot(screenshot(`breadcrumb-diff`));
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-basic`));
+    });
+
+    test('should not have visual regressions with links', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">First</ion-breadcrumb>
+          <ion-breadcrumb href="#">Second</ion-breadcrumb>
+          <ion-breadcrumb href="#">Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-links`));
+    });
+
+    test('should not have visual regressions with custom separators', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>
+            First
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Second
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Third
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Fourth
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-separators`));
+    });
+
+    test('should not have visual regressions with slotted start icons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="home"></ion-icon>
+            First
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Second
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Third
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="document"></ion-icon>
+            Fourth
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-start-icons`));
+    });
+
+    test('should not have visual regressions with slotted end icons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>
+            First
+            <ion-icon slot="end" name="home"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Second
+            <ion-icon slot="end" name="folder"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Third
+            <ion-icon slot="end" name="folder"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Fourth
+            <ion-icon slot="end" name="document"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-end-icons`));
+    });
+
+    test('should not have visual regressions in a toolbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toolbar>
+          <ion-breadcrumbs>
+            <ion-breadcrumb>First</ion-breadcrumb>
+            <ion-breadcrumb>Second</ion-breadcrumb>
+            <ion-breadcrumb>Third</ion-breadcrumb>
+            <ion-breadcrumb>Fourth</ion-breadcrumb>
+          </ion-breadcrumbs>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-in-toolbar`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('breadcrumbs: states'), () => {
+    test('should not have visual regressions when focused', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">First</ion-breadcrumb>
+          <ion-breadcrumb href="#">Second</ion-breadcrumb>
+          <ion-breadcrumb href="#" class="ion-focused">Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-focused`));
+    });
+
+    test('should not have visual regressions when all breadcrumbs are disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb disabled>First</ion-breadcrumb>
+          <ion-breadcrumb disabled>Second</ion-breadcrumb>
+          <ion-breadcrumb disabled>Third</ion-breadcrumb>
+          <ion-breadcrumb disabled>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-all-disabled`));
+    });
+
+    test('should not have visual regressions when one breadcrumb is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb disabled>Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-one-disabled`));
+    });
+
+    test('should not have visual regressions when setting a different breadcrumb to active', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb>Second</ion-breadcrumb>
+          <ion-breadcrumb active>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-active`));
     });
   });
 });
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 1a5466c8def..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index f456c6d43e2..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 763d38255be..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 8b6c1e768bf..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index bfc87ed182f..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 144099b2318..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 67fc1125c83..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index f05da8f4747..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 7bad8488906..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 9617f232bd7..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 6a1c7052eba..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 7b11aa1f5c0..00000000000
Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..08a241b9a96
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c31554fb5cc
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c123ca9d310
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5fea18a72b5
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..17d8da2b62e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..df894299979
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-all-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b2661e55ce3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..868b42e0250
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b43dc0a8c96
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..99275eb322b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dc757815662
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..226f5077005
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5f09319f833
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1848937e99f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4b0a2ff7be6
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..78a85c55122
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1de1e113c45
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f00dd89af21
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-basic-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b9a8ffecbab
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fbf8f68aa0d
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..34594da12cf
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..204878b2feb
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c031f41d0c7
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c0cbcdb0cab
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-active-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d9be46c87d
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..90279a3af34
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2a60a287fce
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..60ddb9474f3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de4dcde7035
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9bccbc5d492
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4e4b16b064a
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c8e57d0c937
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6e98ad065e5
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..13f33fb5ca2
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6addcceea59
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..15f8337eb55
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-custom-separators-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e181dad0201
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7b52a9a986e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..891861215fe
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..52fb243b608
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a66d624f582
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d553e49d6de
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-focused-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1e9a8dbf5ce
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a62ffe781fc
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a1a1d916ccf
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9d70a3a5587
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3b3ee675f4f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3019b2f1bef
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e9e7ddc395f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..634ec80bf8f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..20f129852a6
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e6fc4068805
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a416b2e9c4f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7841564513f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-in-toolbar-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b2661e55ce3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..868b42e0250
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b43dc0a8c96
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..99275eb322b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dc757815662
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..226f5077005
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5f09319f833
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1848937e99f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4b0a2ff7be6
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..78a85c55122
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1de1e113c45
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f00dd89af21
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-links-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0f67049a56d
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fd32a884070
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5bb90a9c270
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9b6345cdcc1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..af58baadc99
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..169e50d4c09
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-one-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..649317cef70
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fa38741320e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c2f6d352849
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0fe744b3be9
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0782d9045cc
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6127f272efd
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..eb6eac854a7
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..364a8846aae
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e4552591d4e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9f674549af0
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..df3c1ecbefd
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..37669b6f718
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-end-icons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..15cdec701e6
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..98a2cebf62b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b3ca9c9e7de
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c1832444918
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8fcaab60c3c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2ff245c39eb
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..68f546ff348
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..621a6db2bef
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c21b1a0ccf0
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03b395e8488
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8e0421e6777
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2ce4598b3d5
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumbs-slotted-start-icons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/index.html b/core/src/components/breadcrumbs/test/basic/index.html
index e59fd2ca926..cd981268286 100644
--- a/core/src/components/breadcrumbs/test/basic/index.html
+++ b/core/src/components/breadcrumbs/test/basic/index.html
@@ -47,13 +47,6 @@
           <ion-title>Breadcrumbs - Basic</ion-title>
         </ion-toolbar>
         <ion-toolbar>
-          <ion-breadcrumbs max-items="2" items-before-collapse="1" items-after-collapse="1">
-            <ion-breadcrumb>First</ion-breadcrumb>
-            <ion-breadcrumb>Second</ion-breadcrumb>
-            <ion-breadcrumb>Third</ion-breadcrumb>
-            <ion-breadcrumb>Fourth</ion-breadcrumb>
-            <ion-breadcrumb>Fifth</ion-breadcrumb>
-          </ion-breadcrumbs>
           <ion-breadcrumbs>
             <ion-breadcrumb href="#"> Home </ion-breadcrumb>
             <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
@@ -66,19 +59,6 @@
       <ion-content class="ion-padding">
         <h1>Default</h1>
 
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
-          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
-          <ion-breadcrumb> 35 mm </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>No Links</h1>
-
         <ion-breadcrumbs>
           <ion-breadcrumb> Home </ion-breadcrumb>
           <ion-breadcrumb> Electronics </ion-breadcrumb>
@@ -90,9 +70,9 @@ <h1>No Links</h1>
 
         <hr />
 
-        <h1>Color: Primary</h1>
+        <h1>Links</h1>
 
-        <ion-breadcrumbs color="primary">
+        <ion-breadcrumbs>
           <ion-breadcrumb href="#"> Home </ion-breadcrumb>
           <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
           <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
@@ -103,19 +83,6 @@ <h1>Color: Primary</h1>
 
         <hr />
 
-        <h1>Color: Primary: Tab Focus</h1>
-
-        <ion-breadcrumbs color="primary">
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#photography" class="ion-focused"> Photography </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
-          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
-          <ion-breadcrumb> 35 mm </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
         <h1>Custom separator</h1>
 
         <ion-breadcrumbs>
@@ -171,227 +138,31 @@ <h1>Custom icons</h1>
 
         <hr />
 
-        <h1>Collapsed</h1>
+        <h1>Custom active</h1>
 
-        <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="4">
-          <ion-breadcrumb href="#">
-            <ion-icon slot="start" ios="home" md="home-sharp"></ion-icon>
-            Home
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#trips">
-            <ion-icon slot="start" ios="folder" md="folder-sharp"></ion-icon>
-            Trips
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#tokyo">
-            <ion-icon slot="start" ios="folder" md="folder-sharp"></ion-icon>
-            Tokyo 2021
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#photos">
-            <ion-icon slot="start" ios="folder" md="folder-sharp"></ion-icon>
-            Photos
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            <ion-icon slot="start" ios="image" md="image-sharp"></ion-icon>
-            cityscape-01-2021.png
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Collapsed: Tab Focus</h1>
-
-        <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="4">
+        <ion-breadcrumbs>
           <ion-breadcrumb href="#">
-            <ion-icon slot="start" ios="home" md="home-sharp"></ion-icon>
+            <ion-icon slot="start" name="home"></ion-icon>
             Home
           </ion-breadcrumb>
-          <ion-breadcrumb href="#trips">
-            <ion-icon slot="start" ios="folder" md="folder-sharp"></ion-icon>
-            Trips
+          <ion-breadcrumb href="#files">
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Files
           </ion-breadcrumb>
-          <ion-breadcrumb href="#tokyo" class="ion-focused">
-            <ion-icon slot="start" ios="folder" md="folder-sharp"></ion-icon>
-            Tokyo 2021
+          <ion-breadcrumb href="#projects">
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Projects
           </ion-breadcrumb>
-          <ion-breadcrumb href="#photos">
-            <ion-icon slot="start" ios="folder" md="folder-sharp"></ion-icon>
-            Photos
+          <ion-breadcrumb href="#user-research" active>
+            <ion-icon slot="start" name="folder"></ion-icon>
+            User Research
           </ion-breadcrumb>
           <ion-breadcrumb>
-            <ion-icon slot="start" ios="image" md="image-sharp"></ion-icon>
-            cityscape-01-2021.png
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>
-          Breadcrumbs: collapsed middle / expand on click
-          <ion-button size="small" fill="clear" onClick="collapseBreadcrumbs()">Re-collapse</ion-button>
-        </h1>
-
-        <ion-breadcrumbs id="expandOnClick" max-items="4">
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Cameras & Camcorders </ion-breadcrumb>
-          <ion-breadcrumb href="#digital-camera-accessories"> Digital Camera Accessories </ion-breadcrumb>
-          <ion-breadcrumb href="#camera-lenses"> Camera Lenses </ion-breadcrumb>
-          <ion-breadcrumb href="#dslr-lenses"> DSLR Lenses </ion-breadcrumb>
-          <ion-breadcrumb href="#prime-lenses"> Prime Lenses </ion-breadcrumb>
-          <ion-breadcrumb> Product Info </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Breadcrumbs: collapsed / popover on click</h1>
-
-        <ion-breadcrumbs id="popoverOnClick" max-items="4" items-before-collapse="0" items-after-collapse="3">
-          <ion-breadcrumb href="#">Home</ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">Cameras & Camcorders</ion-breadcrumb>
-          <ion-breadcrumb href="#digital-camera-accessories">Digital Camera Accessories</ion-breadcrumb>
-          <ion-breadcrumb href="#camera-lenses">Camera Lenses</ion-breadcrumb>
-          <ion-breadcrumb href="#dslr-lenses">DSLR Lenses</ion-breadcrumb>
-          <ion-breadcrumb href="#prime-lenses">Prime Lenses</ion-breadcrumb>
-          <ion-breadcrumb>Product Info</ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Show last separator</h1>
-
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#disabled" disabled> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#data" active> Data </ion-breadcrumb>
-          <ion-breadcrumb href="#file" separator> File </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Breadcrumbs Color: Primary</h1>
-
-        <ion-breadcrumbs color="primary">
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
-          <ion-breadcrumb> Data </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Breadcrumb Color: Varied</h1>
-
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#" color="secondary"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics" color="danger"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
-          <ion-breadcrumb color="tertiary"> Data </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Breadcrumbs (Secondary); Breadcrumb (Danger)</h1>
-
-        <ion-breadcrumbs color="secondary">
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics" color="danger"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
-          <ion-breadcrumb> Data </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Custom Separator: Icon w/ last separator showing</h1>
-
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#">
-            Home
-            <ion-icon slot="separator" name="caret-forward-outline"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">
-            Electronics
-            <ion-icon slot="separator" name="caret-forward-outline"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#disabled" disabled>
-            Disabled
-            <ion-icon slot="separator" name="caret-forward-outline"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb separator="true">
-            Data
-            <ion-icon slot="separator" name="star-outline"></ion-icon>
+            <ion-icon slot="start" name="document"></ion-icon>
+            Survey.txt
           </ion-breadcrumb>
         </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Breadcrumbs: default wrapping</h1>
-
-        <ion-breadcrumbs>
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Cameras & Camcorders </ion-breadcrumb>
-          <ion-breadcrumb href="#digital-camera-accessories"> Digital Camera Accessories </ion-breadcrumb>
-          <ion-breadcrumb href="#camera-lenses"> Camera Lenses </ion-breadcrumb>
-          <ion-breadcrumb href="#dslr-lenses"> DSLR Lenses </ion-breadcrumb>
-          <ion-breadcrumb href="#prime-lenses"> Prime Lenses </ion-breadcrumb>
-          <ion-breadcrumb> Product Info </ion-breadcrumb>
-        </ion-breadcrumbs>
       </ion-content>
     </ion-app>
-
-    <script>
-      const expandOnClick = document.querySelector('#expandOnClick');
-      expandOnClick.addEventListener('ionCollapsedClick', () => expandBreadcrumbs());
-
-      function expandBreadcrumbs() {
-        console.log('expand onClick');
-        expandOnClick.maxItems = undefined;
-      }
-
-      function collapseBreadcrumbs() {
-        expandOnClick.maxItems = 4;
-      }
-
-      const popoverOnClick = document.querySelector('#popoverOnClick');
-      popoverOnClick.addEventListener('ionCollapsedClick', (ev) => presentPopover(ev));
-
-      class ListPopover extends HTMLElement {
-        constructor() {
-          super();
-        }
-
-        connectedCallback() {
-          let template = '';
-
-          this.collapsedBreadcrumbs.forEach((breadcrumb) => {
-            template += `
-            <ion-item href="${breadcrumb.href}">
-              <ion-label>${breadcrumb.textContent}</ion-label>
-            </ion-item>
-          `;
-          });
-
-          this.innerHTML = `
-          <ion-content>
-            <ion-list>
-              ${template}
-            </ion-list>
-          </ion-content>
-        `;
-        }
-      }
-
-      customElements.define('list-popover', ListPopover);
-
-      async function presentPopover(ev) {
-        console.log('present ev', ev);
-        const popover = Object.assign(document.createElement('ion-popover'), {
-          component: 'list-popover',
-          componentProps: ev.detail,
-          event: ev,
-        });
-        document.body.appendChild(popover);
-
-        await popover.present();
-      }
-    </script>
   </body>
 </html>
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts
index a9e9efbbaf5..317cf63951a 100644
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts
@@ -1,14 +1,189 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ config, screenshot, title }) => {
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('breadcrumbs: collapsed'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/breadcrumbs/test/collapsed`, config);
+    test('should show 1 before and 1 after collapse with max items set to 4', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
 
-      await page.setIonViewport();
+      const breadcrumbs = page.locator('ion-breadcrumbs');
 
-      await expect(page).toHaveScreenshot(screenshot(`breadcrumb-collapsed-diff`));
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-collapsed-max-items`));
+    });
+
+    test('should show 0 before and 1 after collapse with max items set to 4 and items before collapse set to 0', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-before-collapse="0">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-collapsed-items-before-collapse-0`));
+    });
+
+    test('should show 2 before and 1 after collapse with max items set to 4 and items before collapse set to 2', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-before-collapse="2">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-collapsed-items-before-collapse-2`));
+    });
+
+    test('should show 2 before and 0 after collapse with max items set to 4 and items after collapse set to 0', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-after-collapse="0">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-collapsed-items-after-collapse-0`));
+    });
+
+    test('should show 2 before and 3 after collapse with max items set to 4 and items after collapse set to 3', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-after-collapse="3">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-collapsed-items-after-collapse-3`));
+    });
+
+    test('should show 2 before and 2 after collapse with max items set to 4 and items before collapse set to 2 and items after collapse set to 2', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-before-collapse="2" items-after-collapse="2">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(
+        screenshot(`breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2`)
+      );
+    });
+
+    test('should show all breadcrumbs with max items set to 4 and items before collapse set to 3 and items after collapse set to 2', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-before-collapse="3" items-after-collapse="2">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const visibleBreadcrumbs = page.locator('ion-breadcrumb:not(.breadcrumb-collapsed)');
+      const collapsedIndicator = page.locator('.breadcrumbs-collapsed-indicator');
+
+      await expect(visibleBreadcrumbs).toHaveCount(6);
+      await expect(collapsedIndicator).not.toBeVisible();
+    });
+
+    test('should show all breadcrumbs with max items set to 4 and items before collapse set to 4 and items after collapse set to 4', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs max-items="4" items-before-collapse="4" items-after-collapse="4">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const visibleBreadcrumbs = page.locator('ion-breadcrumb:not(.breadcrumb-collapsed)');
+      const collapsedIndicator = page.locator('.breadcrumbs-collapsed-indicator');
+
+      await expect(visibleBreadcrumbs).toHaveCount(6);
+      await expect(collapsedIndicator).not.toBeVisible();
     });
   });
 });
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index e3c1d5f8464..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 53e9183aac8..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 89ca52fc452..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 0017a26c8cb..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index e76670ecdd1..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index ea9408b74e5..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index bbd31626c54..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index c731305187e..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index a025477349c..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 55179f53474..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 6bbd60aff3d..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 7f1088353bd..00000000000
Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4c3a3b3081c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bdec603ed2c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ecbe807c5e3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fbc0841c019
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..47dabfe2ed1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..602783ba014
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-0-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7933a989aca
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7626f1f5920
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..df27bc6a37f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c3273cb761e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1600f50a4d1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4b94004665f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-after-collapse-3-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0e619cd2981
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f56732108b3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d49ebaef01e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a5d1cf567b7
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..556dfd6eaa3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..971ad217481
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-0-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d5044266f84
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8d6d4914afa
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..162ad885141
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a853731e7f6
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c9af745dc1a
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..75824baf566
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0c53a9c95ec
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..18098078583
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..72101b52828
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-items-after-collapse-2-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e6e1a11019b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e2f30c43b0e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55943988559
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-items-before-collapse-2-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..add822d67f2
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7d80bd5f36c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a09560c85a8
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..30033ba4362
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..830781d8b7b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fb09d63f8f8
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumbs-collapsed-max-items-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/index.html b/core/src/components/breadcrumbs/test/collapsed/index.html
index ad5545a60fd..fbaabc1ee56 100644
--- a/core/src/components/breadcrumbs/test/collapsed/index.html
+++ b/core/src/components/breadcrumbs/test/collapsed/index.html
@@ -23,22 +23,19 @@
             <ion-button id="expandToggleButton" onClick="toggleBreadcrumbCollapse()"> Expand All </ion-button>
           </ion-buttons>
         </ion-toolbar>
+        <ion-toolbar>
+          <ion-breadcrumbs max-items="4" class="expandOnClick">
+            <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+            <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+            <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+            <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+            <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+            <ion-breadcrumb> 35 mm </ion-breadcrumb>
+          </ion-breadcrumbs>
+        </ion-toolbar>
       </ion-header>
 
       <ion-content class="ion-padding">
-        <h1>Default</h1>
-
-        <ion-breadcrumbs class="expandWithoutCollapse">
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
-          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
-          <ion-breadcrumb> 35 mm </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
         <h1>Max Items: 4</h1>
 
         <ion-breadcrumbs max-items="4" class="expandOnClick">
@@ -117,49 +114,9 @@ <h1>Max Items: 4; ItemsBeforeCollapse: 2; ItemsAfterCollapse: 2</h1>
 
         <hr />
 
-        <h1>
-          Max Items: 4; ItemsBeforeCollapse: 0; ItemsAfterCollapse: 4
-          <ion-button size="small" fill="clear" onClick="changeActive()">Set Active</ion-button>
-        </h1>
-
-        <ion-breadcrumbs
-          id="custom-active"
-          max-items="4"
-          items-before-collapse="0"
-          items-after-collapse="4"
-          class="expandOnClick"
-        >
-          <ion-breadcrumb href="#">
-            Home
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics">
-            Electronics
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#photography">
-            Photography
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras">
-            Cameras
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb href="#film" active>
-            Film
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-          <ion-breadcrumb>
-            35 mm
-            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
-          </ion-breadcrumb>
-        </ion-breadcrumbs>
-
-        <hr />
-
-        <h1>Max Items: 4; ItemsBeforeCollapse: 3; ItemsAfterCollapse: 2</h1>
+        <h1>Max Items: 4; ItemsBeforeCollapse: 0; ItemsAfterCollapse: 4</h1>
 
-        <ion-breadcrumbs max-items="4" items-before-collapse="3" items-after-collapse="2" class="expandOnClick">
+        <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="4" class="expandOnClick">
           <ion-breadcrumb href="#"> Home </ion-breadcrumb>
           <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
           <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
@@ -170,15 +127,15 @@ <h1>Max Items: 4; ItemsBeforeCollapse: 3; ItemsAfterCollapse: 2</h1>
 
         <hr />
 
-        <h1>Max Items: 4; ItemsBeforeCollapse: 4; ItemsAfterCollapse: 4</h1>
+        <h1>Breadcrumbs: collapsed / popover on click</h1>
 
-        <ion-breadcrumbs max-items="4" items-before-collapse="4" items-after-collapse="4" class="expandOnClick">
-          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
-          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
-          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
-          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
-          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
-          <ion-breadcrumb> 35 mm </ion-breadcrumb>
+        <ion-breadcrumbs id="popoverOnClick" max-items="4" items-before-collapse="0" items-after-collapse="3">
+          <ion-breadcrumb href="#">Home</ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+          <ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+          <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+          <ion-breadcrumb>35 mm</ion-breadcrumb>
         </ion-breadcrumbs>
 
         <hr />
@@ -196,19 +153,16 @@ <h1>Max Items: 4; ItemsBeforeCollapse: 4; ItemsAfterCollapse: 4</h1>
       }
 
       function expandBreadcrumbs(breadcrumbs) {
-        console.log('expand breadcrumbs');
         breadcrumbs.maxItems = undefined;
       }
 
       function expandAllBreadcrumbs() {
-        console.log('expand all breadcrumbs');
         for (const breadcrumbs of expandOnClickBreadcrumbs) {
           breadcrumbs.maxItems = undefined;
         }
       }
 
       function collapseAllBreadcrumbs() {
-        console.log('collapse all breadcrumbs');
         for (const breadcrumbs of expandOnClickBreadcrumbs) {
           breadcrumbs.maxItems = 4;
         }
@@ -226,28 +180,49 @@ <h1>Max Items: 4; ItemsBeforeCollapse: 4; ItemsAfterCollapse: 4</h1>
         }
       }
 
-      const expandWithoutCollapseBreadcrumbs = document.querySelector('.expandWithoutCollapse');
-      expandWithoutCollapseBreadcrumbs.addEventListener('ionCollapsedClick', () => expandBreadcrumbs(breadcrumbs));
-
-      function changeActive() {
-        const breadcrumbs = Array.from(document.querySelectorAll('#custom-active ion-breadcrumb'));
-        const activeIndex = breadcrumbs.findIndex((breadcrumb) => breadcrumb.active);
-
-        switch (activeIndex) {
-          case 4:
-            breadcrumbs[4].active = false;
-            breadcrumbs[2].active = true;
-            break;
-          case 2:
-            breadcrumbs[2].active = false;
-            breadcrumbs[1].active = true;
-            break;
-          case 1:
-            breadcrumbs[1].active = false;
-            breadcrumbs[4].active = true;
-            break;
+      // Popover on click breadcrumbs
+      const popoverOnClick = document.querySelector('#popoverOnClick');
+      popoverOnClick.addEventListener('ionCollapsedClick', (ev) => presentPopover(ev));
+
+      class ListPopover extends HTMLElement {
+        constructor() {
+          super();
+        }
+
+        connectedCallback() {
+          let template = '';
+
+          this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+            template += `
+            <ion-item href="${breadcrumb.href}">
+              <ion-label>${breadcrumb.textContent}</ion-label>
+            </ion-item>
+          `;
+          });
+
+          this.innerHTML = `
+          <ion-content>
+            <ion-list>
+              ${template}
+            </ion-list>
+          </ion-content>
+        `;
         }
       }
+
+      customElements.define('list-popover', ListPopover);
+
+      async function presentPopover(ev) {
+        console.log('present ev', ev);
+        const popover = Object.assign(document.createElement('ion-popover'), {
+          component: 'list-popover',
+          componentProps: ev.detail,
+          event: ev,
+        });
+        document.body.appendChild(popover);
+
+        await popover.present();
+      }
     </script>
 
     <style>
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts
new file mode 100644
index 00000000000..3e5240af859
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts
@@ -0,0 +1,94 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('breadcrumbs: color'), () => {
+    test('should not have visual regressions with primary color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb>Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-color-primary`));
+    });
+
+    test('should not have visual regressions with disabled primary color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb disabled>First</ion-breadcrumb>
+          <ion-breadcrumb disabled>Second</ion-breadcrumb>
+          <ion-breadcrumb disabled>Third</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-color-primary-disabled`));
+    });
+
+    test('should not have visual regressions with focused primary color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb class="ion-focused">Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-color-primary-focused`));
+    });
+
+    test('should not have visual regressions with varied breadcrumb color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb color="secondary">First</ion-breadcrumb>
+          <ion-breadcrumb color="danger">Second</ion-breadcrumb>
+          <ion-breadcrumb color="tertiary">Third</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-color-varied`));
+    });
+
+    test('should not have visual regressions with secondary breadcrumbs and danger color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs color="secondary">
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb color="danger">Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-color-secondary-breadcrumb-danger`));
+    });
+  });
+});
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3f0531e76f0
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b7c80995ad1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..707ba83323c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5e21bcf60e1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c68742cb3c1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6b20e127cba
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b1fa2ca4836
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6f498f94d4c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c1839e58f3c
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..47964431eca
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..68e62f4b83a
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..903fcbf4b88
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-focused-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ecd48d56377
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8229e77f49b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..972c5e50c0e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d0e60e3af8f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..78a0c8f2182
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9fe5c5bc761
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-primary-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4e160698187
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..95788964040
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5e8e4920044
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..84fac0ab2cc
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..81677ff23a3
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..adfa92ef792
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-secondary-breadcrumb-danger-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c727ab3842d
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6f06e484e4f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6f090e31c15
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..906b9b6e853
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ebd1b819cc1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ea4fcb05346
Binary files /dev/null and b/core/src/components/breadcrumbs/test/color/breadcrumbs.e2e.ts-snapshots/breadcrumbs-color-varied-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/color/index.html b/core/src/components/breadcrumbs/test/color/index.html
new file mode 100644
index 00000000000..a1f9e5a1aef
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/color/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Breadcrumbs - Color</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      h1 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #a1a7b0;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+
+      hr {
+        background: #eff1f3;
+
+        margin-top: 18px;
+        margin-bottom: 25px;
+      }
+
+      ion-content ion-breadcrumbs {
+        padding: 3px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Breadcrumbs - Color</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-breadcrumbs color="danger">
+            <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+            <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+            <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
+            <ion-breadcrumb> Data </ion-breadcrumb>
+          </ion-breadcrumbs>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <h1>Breadcrumbs Color: Primary</h1>
+
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
+          <ion-breadcrumb> Data </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <hr />
+
+        <h1>Breadcrumbs Color: Primary: Tab Focus</h1>
+
+        <ion-breadcrumbs color="primary">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics" class="ion-focused"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
+          <ion-breadcrumb> Data </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <hr />
+
+        <h1>Breadcrumb Color: Varied</h1>
+
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#" color="secondary"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics" color="danger"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
+          <ion-breadcrumb color="tertiary"> Data </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <hr />
+
+        <h1>Breadcrumbs (Secondary); Breadcrumb (Danger)</h1>
+
+        <ion-breadcrumbs color="secondary">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics" color="danger"> Electronics </ion-breadcrumb>
+          <ion-breadcrumb href="#disabled" disabled> Disabled </ion-breadcrumb>
+          <ion-breadcrumb> Data </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>