diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html
index 507bc0dea02..e5e0591138e 100644
--- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html
+++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html
@@ -1,6 +1,12 @@
 <nav [attr.aria-label]="'common.breadcrumbs' | cxTranslate" tabindex="-1">
   <ol [attr.aria-label]="'common.breadcrumbs' | cxTranslate">
-    <li *ngFor="let crumb of crumbs$ | async; let last = last">
+    <li
+      *ngFor="
+        let crumb of crumbs$ | async as crumbList;
+        let i = index;
+        let last = last
+      "
+    >
       <a
         [routerLink]="crumb.link"
         [innerHTML]="crumb.label"
@@ -8,8 +14,14 @@
           last
             ? ('common.breadcrumbsCurrentPage' | cxTranslate) +
               ' ' +
-              crumb.label
-            : crumb.label
+              crumb.label +
+              (i + 1) +
+              ('common.of' | cxTranslate) +
+              crumbList.length
+            : crumb.label +
+              (i + 1) +
+              ('common.of' | cxTranslate) +
+              crumbList.length
         "
       ></a>
     </li>