diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index 62b149ac60..266d3ad7c4 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -162,6 +162,11 @@ export class Breadcrumbs implements ComponentInterface {
     return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
   };
 
+  private slotChanged = () => {
+    this.resetActiveBreadcrumb();
+    this.breadcrumbsInit();
+  };
+
   render() {
     const { color, collapsed } = this;
     const mode = getIonMode(this);
@@ -175,7 +180,7 @@ export class Breadcrumbs implements ComponentInterface {
           'breadcrumbs-collapsed': collapsed,
         })}
       >
-        <slot></slot>
+        <slot onSlotchange={this.slotChanged}></slot>
       </Host>
     );
   }
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts
new file mode 100644
index 0000000000..13716acf92
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts
@@ -0,0 +1,75 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('breadcrumbs: reactive', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.goto(`/src/components/breadcrumbs/test/reactive`);
+  });
+
+  test.describe('adding a breadcrumb item', () => {
+    test('should update the active item', async ({ page }) => {
+      const breadcrumbItems = page.locator('ion-breadcrumb');
+
+      const addItemButton = page.locator('ion-button#add-btn');
+
+      await expect(breadcrumbItems).toHaveCount(4);
+
+      await addItemButton.click();
+      await page.waitForChanges();
+
+      await expect(breadcrumbItems).toHaveCount(5);
+
+      const previousActiveItem = breadcrumbItems.nth(3);
+      const lastBreadcrumbItem = breadcrumbItems.nth(4);
+
+      await expect(previousActiveItem).not.toHaveClass(/breadcrumb-active/);
+      await expect(lastBreadcrumbItem).toHaveClass(/breadcrumb-active/);
+    });
+
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setIonViewport();
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await page.click('#add-btn');
+      await page.waitForChanges();
+
+      expect(await breadcrumbs.screenshot()).toMatchSnapshot(
+        `breadcrumbs-reactive-add-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+
+  test.describe('removing a breadcrumb item', () => {
+    test('should update the active item', async ({ page }) => {
+      const breadcrumbItems = page.locator('ion-breadcrumb');
+
+      await expect(breadcrumbItems).toHaveCount(4);
+
+      await page.click('#remove-btn');
+      await page.waitForChanges();
+
+      await expect(breadcrumbItems).toHaveCount(3);
+
+      const lastBreadcrumbItem = breadcrumbItems.nth(2);
+
+      await expect(lastBreadcrumbItem).toHaveClass(/breadcrumb-active/);
+    });
+
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setIonViewport();
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await page.click('#remove-btn');
+      await page.waitForChanges();
+
+      expect(await breadcrumbs.screenshot()).toMatchSnapshot(
+        `breadcrumbs-reactive-remove-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6912847e30
Binary files /dev/null and b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c687a53119
Binary files /dev/null and b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bf715ca932
Binary files /dev/null and b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d79d3f9aee
Binary files /dev/null and b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..dfbd156466
Binary files /dev/null and b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2fcf3c9636
Binary files /dev/null and b/core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/reactive/index.html b/core/src/components/breadcrumbs/test/reactive/index.html
new file mode 100644
index 0000000000..23faf99adf
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/reactive/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Breadcrumbs - Reactive</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>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Breadcrumbs - Reactive</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="4">
+          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+          <ion-breadcrumb href="#"> Trips </ion-breadcrumb>
+          <ion-breadcrumb href="#"> Tokyo 2021 </ion-breadcrumb>
+          <ion-breadcrumb href="#"> Photos </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <ion-button id="add-btn" onclick="addItem()">Add Item</ion-button>
+        <ion-button id="remove-btn" onclick="removeItem()">Remove Item</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const breadcrumbs = document.querySelector('ion-breadcrumbs');
+
+      const addItem = () => {
+        const breadcrumb = document.createElement('ion-breadcrumb');
+        const count = breadcrumbs.querySelectorAll('ion-breadcrumb').length;
+        breadcrumb.href = '#';
+        breadcrumb.textContent = `Item ${count}`;
+        breadcrumbs.appendChild(breadcrumb);
+      };
+
+      const removeItem = () => {
+        const breadcrumb = breadcrumbs.querySelector('ion-breadcrumb:last-child');
+        breadcrumbs.removeChild(breadcrumb);
+      };
+    </script>
+  </body>
+</html>