diff --git a/dashboard/src/components/inception/InceptionSkills.vue b/dashboard/src/components/inception/InceptionSkills.vue
index db4b3c725a..7734ae9426 100644
--- a/dashboard/src/components/inception/InceptionSkills.vue
+++ b/dashboard/src/components/inception/InceptionSkills.vue
@@ -15,7 +15,7 @@ limitations under the License.
 */
 <template>
   <div class="inception-container pb-4">
-    <div id="skills-client-container" ref="skillsDisplayRef" @route-changed="skillsDisplayRouteChanged"></div>
+    <div id="skills-client-container"></div>
   </div>
 </template>
 
@@ -47,6 +47,7 @@ limitations under the License.
         version: this.skillsVersion,
         options: this.options,
         theme: this.theme,
+        handleRouteChanged: (newPath) => { this.skillsDisplayRouteChanged(newPath); },
       });
       clientDisplay.attachTo(document.querySelector('#skills-client-container'));
       this.clientDisplay = clientDisplay;
diff --git a/dashboard/src/components/myProgress/MyProjectSkillsPage.vue b/dashboard/src/components/myProgress/MyProjectSkillsPage.vue
index cacfa1fad2..2eacb6d753 100644
--- a/dashboard/src/components/myProgress/MyProjectSkillsPage.vue
+++ b/dashboard/src/components/myProgress/MyProjectSkillsPage.vue
@@ -29,7 +29,7 @@ limitations under the License.
           Contact Project <i aria-hidden="true" class="fas fas fa-mail-bulk"/>
         </b-button>
       </div>
-      <div v-if="!isLoadingSettings" id="skills-client-container" ref="skillsDisplayRef" @route-changed="skillsDisplayRouteChanged">
+      <div v-if="!isLoadingSettings" id="skills-client-container">
       </div>
     </div>
     <contact-owners-dialog v-if="showContact" :project-name="projectName" v-model="showContact" :project-id="projectId"/>
@@ -149,6 +149,7 @@ limitations under the License.
             version: this.skillsVersion,
             options: this.options,
             theme: this.themeObj,
+            handleRouteChanged: (newPath) => { this.skillsDisplayRouteChanged(newPath); },
           });
           this.$nextTick(() => {
             clientDisplay.attachTo(document.querySelector('#skills-client-container'));
diff --git a/dashboard/src/components/users/ClientDisplayPreview.vue b/dashboard/src/components/users/ClientDisplayPreview.vue
index 1dfaa92698..3a3f6efa73 100644
--- a/dashboard/src/components/users/ClientDisplayPreview.vue
+++ b/dashboard/src/components/users/ClientDisplayPreview.vue
@@ -33,7 +33,7 @@ limitations under the License.
       </b-form>
     </sub-page-header>
     <loading-container :is-loading="checkingAccess">
-      <div id="skills-client-container" ref="skillsDisplayRef" @route-changed="skillsDisplayRouteChanged"></div>
+      <div id="skills-client-container"></div>
       <div v-if="!canAccess" class="container">
         <div class="row justify-content-center">
           <div class="col-md-6 mt-3">
@@ -171,6 +171,7 @@ limitations under the License.
             options: this.configuration,
             theme: this.theme,
             userId: this.userIdParam,
+            handleRouteChanged: (newPath) => { this.skillsDisplayRouteChanged(newPath); },
           });
           clientDisplay.attachTo(document.querySelector('#skills-client-container'));
           this.clientDisplay = clientDisplay;
diff --git a/e2e-tests/cypress/e2e/my-progress_breadcrumb_spec.js b/e2e-tests/cypress/e2e/my-progress_breadcrumb_spec.js
index dc60b2912b..1bcf5e90e0 100644
--- a/e2e-tests/cypress/e2e/my-progress_breadcrumb_spec.js
+++ b/e2e-tests/cypress/e2e/my-progress_breadcrumb_spec.js
@@ -27,7 +27,18 @@ const timeFromNowFormatter = (value) => dayjs(value)
 
 const testTime = new Date().getTime();
 const yesterday = new Date().getTime() - (1000 * 60 * 60 * 24);
-
+const getIframeBody = () => {
+    // get the iframe > document > body
+    // and retry until the body element is not empty
+    return cy
+      .get('iframe')
+      .its('0.contentDocument.body')
+      .should('not.be.empty')
+      // wraps "body" DOM element to allow
+      // chaining more Cypress commands, like ".find(...)"
+      // https://on.cypress.io/wrap
+      .then(cy.wrap);
+};
 describe('My Progress Breadcrumb Tests', () => {
 
     beforeEach(() => {
@@ -1041,5 +1052,176 @@ describe('My Progress Breadcrumb Tests', () => {
 
     });
 
+    it('navigate through and validate breadcrumbs', function () {
+
+        cy.visit('/');
+
+        cy.get('[data-cy=project-link-proj1]')
+          .click();
+        cy.wait('@pointHistoryChart');
+
+        cy.dashboardCd()
+          .contains('Overall Points');
+        cy.get('[data-cy="breadcrumb-Progress And Rankings"]')
+          .should('be.visible');
+        cy.get('[data-cy=breadcrumb-proj1]')
+          .should('be.visible');
+        cy.get('[data-cy=breadcrumb-proj1]')
+          .should('exist');
+        cy.get('[data-cy=breadcrumb-proj1]')
+          .should('not.have.attr', 'href');
+        cy.get('[data-cy=breadcrumb-bar]')
+          .contains('Project: proj1')
+          .should('be.visible');
+
+        // click on subject
+        getIframeBody()
+          .find('.user-skill-subject-tile:nth-child(1)')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('Subject 1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .its('length')
+          .should('eq', 3);
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(0)
+          .should('contain.text', 'Progress And Rankings');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(1)
+          .should('contain.text', 'Project: proj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(2)
+          .should('contain.text', 'Subject: subj1');
+
+        // click on skill
+        getIframeBody()
+          .find('[data-cy="skillProgress_index-0"] [data-cy="skillProgressBar"]')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('Skill Overview');
+        cy.get('[data-cy=breadcrumb-item]')
+          .its('length')
+          .should('eq', 4);
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(0)
+          .should('contain.text', 'Progress And Rankings');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(1)
+          .should('contain.text', 'Project: proj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(2)
+          .should('contain.text', 'Subject: subj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(3)
+          .should('contain.text', 'Skill: skill1');
+
+        // back to subject page
+        cy.get('[data-cy=breadcrumb-subj1]')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('Subject 1');
+
+        // click on rank
+        getIframeBody()
+          .find('[data-cy=myRank]')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('My Rank');
+        cy.get('[data-cy=breadcrumb-item]')
+          .its('length')
+          .should('eq', 4);
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(0)
+          .should('contain.text', 'Progress And Rankings');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(1)
+          .should('contain.text', 'Project: proj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(2)
+          .should('contain.text', 'Subject: subj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(3)
+          .should('contain.text', 'Rank');
+
+
+        // back to home page
+        cy.get('[data-cy=breadcrumb-proj1]')
+          .click();
+        cy.dashboardCd()
+          .contains('Overall Points');
+        // click on rank
+        getIframeBody()
+          .find('[data-cy=myRank]')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('My Rank');
+        cy.get('[data-cy=breadcrumb-item]')
+          .its('length')
+          .should('eq', 3);
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(0)
+          .should('contain.text', 'Progress And Rankings');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(1)
+          .should('contain.text', 'Project: proj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(2)
+          .should('contain.text', 'Rank');
+
+        // back to home page
+        cy.get('[data-cy=breadcrumb-proj1]')
+          .click();
+        cy.dashboardCd()
+          .contains('Overall Points');
+
+        // click on my badges
+        getIframeBody()
+          .find('[data-cy=myBadges]')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('My Badges');
+        cy.get('[data-cy=breadcrumb-item]')
+          .its('length')
+          .should('eq', 3);
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(0)
+          .should('contain.text', 'Progress And Rankings');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(1)
+          .should('contain.text', 'Project: proj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(2)
+          .should('contain.text', 'Badges');
+
+        // click on badge
+        getIframeBody()
+          .find('[data-cy=earnedBadgeLink_badge1]')
+          .click();
+        getIframeBody()
+          .find('[data-cy=title]')
+          .contains('Badge Details');
+        cy.get('[data-cy=breadcrumb-item]')
+          .its('length')
+          .should('eq', 4);
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(0)
+          .should('contain.text', 'Progress And Rankings');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(1)
+          .should('contain.text', 'Project: proj1');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(2)
+          .should('contain.text', 'Badges');
+        cy.get('[data-cy=breadcrumb-item]')
+          .eq(3)
+          .should('contain.text', 'Badge: badge1');
+    });
+
 });