diff --git a/ui/lib/kubernetes/addon/components/page/configuration.hbs b/ui/lib/kubernetes/addon/components/page/configuration.hbs
index 5db4ed727015..590a8f7c0eae 100644
--- a/ui/lib/kubernetes/addon/components/page/configuration.hbs
+++ b/ui/lib/kubernetes/addon/components/page/configuration.hbs
@@ -1,4 +1,4 @@
-<TabPageHeader @model={{@backend}}>
+<TabPageHeader @model={{@backend}} @breadcrumbs={{@breadcrumbs}}>
   <ToolbarLink @route="configure" data-test-toolbar-config-action>
     {{if @config "Edit configuration" "Configure Kubernetes"}}
   </ToolbarLink>
diff --git a/ui/lib/kubernetes/addon/components/page/credentials.hbs b/ui/lib/kubernetes/addon/components/page/credentials.hbs
index 4ea718127d5e..84d7d37f8cab 100644
--- a/ui/lib/kubernetes/addon/components/page/credentials.hbs
+++ b/ui/lib/kubernetes/addon/components/page/credentials.hbs
@@ -1,25 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li data-test-crumb="overview">
-          <span class="sep">/</span>
-          <LinkTo @route="overview">{{@backend}}</LinkTo>
-        </li>
-        <li data-test-crumb="roles">
-          <span class="sep">/</span>
-          <LinkTo @route="roles">roles</LinkTo>
-        </li>
-        <li data-test-crumb="details">
-          <span class="sep">/</span>
-          <LinkTo @route="roles.role.details">{{@roleName}}</LinkTo>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span>credentials</span>
-        </li>
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3 has-bottom-margin-2" data-test-credentials-header>
diff --git a/ui/lib/kubernetes/addon/components/page/overview.hbs b/ui/lib/kubernetes/addon/components/page/overview.hbs
index c2328b333039..45a5bdf97532 100644
--- a/ui/lib/kubernetes/addon/components/page/overview.hbs
+++ b/ui/lib/kubernetes/addon/components/page/overview.hbs
@@ -1,4 +1,4 @@
-<TabPageHeader @model={{@backend}}>
+<TabPageHeader @model={{@backend}} @breadcrumbs={{@breadcrumbs}}>
   <ToolbarLink @route="configure">Configure Kubernetes</ToolbarLink>
 </TabPageHeader>
 
diff --git a/ui/lib/kubernetes/addon/components/page/role/details.hbs b/ui/lib/kubernetes/addon/components/page/role/details.hbs
index 897db441a8cc..9001a7c781fd 100644
--- a/ui/lib/kubernetes/addon/components/page/role/details.hbs
+++ b/ui/lib/kubernetes/addon/components/page/role/details.hbs
@@ -1,21 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
-      <ul>
-        <li data-test-crumb="overview">
-          <span class="sep">/</span>
-          <LinkTo @route="overview">{{@model.backend}}</LinkTo>
-        </li>
-        <li data-test-crumb="roles">
-          <span class="sep">/</span>
-          <LinkTo @route="roles">roles</LinkTo>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span data-test-crumb="role">{{@model.name}}</span>
-        </li>
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-header-title>
diff --git a/ui/lib/kubernetes/addon/components/page/roles.hbs b/ui/lib/kubernetes/addon/components/page/roles.hbs
index dc600d3f021d..8feff9dd5334 100644
--- a/ui/lib/kubernetes/addon/components/page/roles.hbs
+++ b/ui/lib/kubernetes/addon/components/page/roles.hbs
@@ -1,4 +1,4 @@
-<TabPageHeader @model={{@backend}} @filterRoles={{true}} @rolesFilterValue={{@filterValue}}>
+<TabPageHeader @model={{@backend}} @filterRoles={{true}} @rolesFilterValue={{@filterValue}} @breadcrumbs={{@breadcrumbs}}>
   <ToolbarLink @route="roles.create" @type="add" data-test-toolbar-roles-action>
     Create role
   </ToolbarLink>
diff --git a/ui/lib/kubernetes/addon/components/tab-page-header.hbs b/ui/lib/kubernetes/addon/components/tab-page-header.hbs
index f0c5da6700fe..0048a90ff12e 100644
--- a/ui/lib/kubernetes/addon/components/tab-page-header.hbs
+++ b/ui/lib/kubernetes/addon/components/tab-page-header.hbs
@@ -1,17 +1,6 @@
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
-      <ul>
-        <li data-test-crumb="secrets">
-          <span class="sep">/</span>
-          <LinkToExternal @route="secrets">secrets</LinkToExternal>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span data-test-crumb="path">{{@model.id}}</span>
-        </li>
-      </ul>
-    </nav>
+    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-header-title>
diff --git a/ui/lib/kubernetes/addon/routes/configuration.js b/ui/lib/kubernetes/addon/routes/configuration.js
index c4e21706c910..6c53330b99fb 100644
--- a/ui/lib/kubernetes/addon/routes/configuration.js
+++ b/ui/lib/kubernetes/addon/routes/configuration.js
@@ -7,4 +7,13 @@ export default class KubernetesConfigureRoute extends FetchConfigRoute {
       config: this.configModel,
     };
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: resolvedModel.backend.id },
+    ];
+  }
 }
diff --git a/ui/lib/kubernetes/addon/routes/overview.js b/ui/lib/kubernetes/addon/routes/overview.js
index 1622598c2d3e..bcae6f5e9a50 100644
--- a/ui/lib/kubernetes/addon/routes/overview.js
+++ b/ui/lib/kubernetes/addon/routes/overview.js
@@ -10,4 +10,13 @@ export default class KubernetesOverviewRoute extends FetchConfigRoute {
       roles: this.store.query('kubernetes/role', { backend }).catch(() => []),
     });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: resolvedModel.backend.id },
+    ];
+  }
 }
diff --git a/ui/lib/kubernetes/addon/routes/roles/index.js b/ui/lib/kubernetes/addon/routes/roles/index.js
index 8f60321e1b41..da7a4e4ae260 100644
--- a/ui/lib/kubernetes/addon/routes/roles/index.js
+++ b/ui/lib/kubernetes/addon/routes/roles/index.js
@@ -19,4 +19,13 @@ export default class KubernetesRolesRoute extends FetchConfigRoute {
       roles,
     });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: resolvedModel.backend.id },
+    ];
+  }
 }
diff --git a/ui/lib/kubernetes/addon/routes/roles/role/credentials.js b/ui/lib/kubernetes/addon/routes/roles/role/credentials.js
index bdab5cac72d4..0827dd83686d 100644
--- a/ui/lib/kubernetes/addon/routes/roles/role/credentials.js
+++ b/ui/lib/kubernetes/addon/routes/roles/role/credentials.js
@@ -9,4 +9,15 @@ export default class KubernetesRoleCredentialsRoute extends Route {
       backend: this.secretMountPath.get(),
     };
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: resolvedModel.backend, route: 'overview' },
+      { label: 'roles', route: 'roles' },
+      { label: resolvedModel.roleName, route: 'roles.role.details' },
+      { label: 'credentials' },
+    ];
+  }
 }
diff --git a/ui/lib/kubernetes/addon/routes/roles/role/details.js b/ui/lib/kubernetes/addon/routes/roles/role/details.js
index 8928edc0b6ae..a2969104dd3f 100644
--- a/ui/lib/kubernetes/addon/routes/roles/role/details.js
+++ b/ui/lib/kubernetes/addon/routes/roles/role/details.js
@@ -10,4 +10,14 @@ export default class KubernetesRoleDetailsRoute extends Route {
     const { name } = this.paramsFor('roles.role');
     return this.store.queryRecord('kubernetes/role', { backend, name });
   }
+
+  setupController(controller, resolvedModel) {
+    super.setupController(controller, resolvedModel);
+
+    controller.breadcrumbs = [
+      { label: resolvedModel.backend, route: 'overview' },
+      { label: 'roles', route: 'roles' },
+      { label: resolvedModel.name },
+    ];
+  }
 }
diff --git a/ui/lib/kubernetes/addon/templates/configuration.hbs b/ui/lib/kubernetes/addon/templates/configuration.hbs
index ce68627d37bc..5b84c30104ce 100644
--- a/ui/lib/kubernetes/addon/templates/configuration.hbs
+++ b/ui/lib/kubernetes/addon/templates/configuration.hbs
@@ -1 +1 @@
-<Page::Configuration @config={{this.model.config}} @backend={{this.model.backend}} />
\ No newline at end of file
+<Page::Configuration @config={{this.model.config}} @backend={{this.model.backend}} @breadcrumbs={{this.breadcrumbs}} />
\ No newline at end of file
diff --git a/ui/lib/kubernetes/addon/templates/overview.hbs b/ui/lib/kubernetes/addon/templates/overview.hbs
index 621a2bb98da5..2d1aeec8b539 100644
--- a/ui/lib/kubernetes/addon/templates/overview.hbs
+++ b/ui/lib/kubernetes/addon/templates/overview.hbs
@@ -1 +1,6 @@
-<Page::Overview @config={{this.model.config}} @backend={{this.model.backend}} @roles={{this.model.roles}} />
\ No newline at end of file
+<Page::Overview
+  @config={{this.model.config}}
+  @backend={{this.model.backend}}
+  @roles={{this.model.roles}}
+  @breadcrumbs={{this.breadcrumbs}}
+/>
\ No newline at end of file
diff --git a/ui/lib/kubernetes/addon/templates/roles/index.hbs b/ui/lib/kubernetes/addon/templates/roles/index.hbs
index 3bbfd28e9bd3..f255161c1411 100644
--- a/ui/lib/kubernetes/addon/templates/roles/index.hbs
+++ b/ui/lib/kubernetes/addon/templates/roles/index.hbs
@@ -3,4 +3,5 @@
   @config={{this.model.config}}
   @backend={{this.model.backend}}
   @filterValue={{this.pageFilter}}
+  @breadcrumbs={{this.breadcrumbs}}
 />
\ No newline at end of file
diff --git a/ui/lib/kubernetes/addon/templates/roles/role/credentials.hbs b/ui/lib/kubernetes/addon/templates/roles/role/credentials.hbs
index 0d881b0348fa..3562e18edb5c 100644
--- a/ui/lib/kubernetes/addon/templates/roles/role/credentials.hbs
+++ b/ui/lib/kubernetes/addon/templates/roles/role/credentials.hbs
@@ -1 +1 @@
-<Page::Credentials @roleName={{this.model.roleName}} @backend={{this.model.backend}} />
\ No newline at end of file
+<Page::Credentials @roleName={{this.model.roleName}} @backend={{this.model.backend}} @breadcrumbs={{this.breadcrumbs}} />
\ No newline at end of file
diff --git a/ui/lib/kubernetes/addon/templates/roles/role/details.hbs b/ui/lib/kubernetes/addon/templates/roles/role/details.hbs
index 1653d76b4a42..e7ad643c7508 100644
--- a/ui/lib/kubernetes/addon/templates/roles/role/details.hbs
+++ b/ui/lib/kubernetes/addon/templates/roles/role/details.hbs
@@ -1 +1 @@
-<Page::Role::Details @model={{@model}} />
\ No newline at end of file
+<Page::Role::Details @model={{@model}} @breadcrumbs={{this.breadcrumbs}} />
\ No newline at end of file
diff --git a/ui/tests/acceptance/secrets/backend/kubernetes/credentials-test.js b/ui/tests/acceptance/secrets/backend/kubernetes/credentials-test.js
index 9668de34b16c..cf79ee5b9255 100644
--- a/ui/tests/acceptance/secrets/backend/kubernetes/credentials-test.js
+++ b/ui/tests/acceptance/secrets/backend/kubernetes/credentials-test.js
@@ -30,13 +30,13 @@ module('Acceptance | kubernetes | credentials', function (hooks) {
   test('it should have correct breadcrumb links in credentials view', async function (assert) {
     assert.expect(3);
     await this.visitRoleCredentials();
-    await click('[data-test-crumb="details"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(3) a');
     this.validateRoute(assert, 'roles.role.details', 'Transitions to role details route on breadcrumb click');
     await this.visitRoleCredentials();
-    await click('[data-test-crumb="roles"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(2) a');
     this.validateRoute(assert, 'roles.index', 'Transitions to roles route on breadcrumb click');
     await this.visitRoleCredentials();
-    await click('[data-test-crumb="overview"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(1) a');
     this.validateRoute(assert, 'overview', 'Transitions to overview route on breadcrumb click');
   });
 
diff --git a/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js b/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
index 68b2f7eea6cc..3736e2d530fb 100644
--- a/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
+++ b/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
@@ -46,10 +46,10 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     assert.expect(2);
     await this.visitRoles();
     await click('[data-test-list-item-link]');
-    await click('[data-test-crumb="roles"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(2) a');
     this.validateRoute(assert, 'roles.index', 'Transitions to roles route on breadcrumb click');
     await click('[data-test-list-item-link]');
-    await click('[data-test-crumb="overview"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(1) a');
     this.validateRoute(assert, 'overview', 'Transitions to overview route on breadcrumb click');
   });
 
@@ -68,7 +68,8 @@ module('Acceptance | kubernetes | roles', function (hooks) {
           `roles.role.${action}`,
           `Transitions to ${action} route on menu action click`
         );
-        const selector = action === 'details' ? '[data-test-crumb="roles"] a' : '[data-test-cancel]';
+        const selector =
+          action === 'details' ? '[data-test-breadcrumbs] li:nth-child(2) a' : '[data-test-cancel]';
         await click(selector);
       }
     }
@@ -84,7 +85,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     await fillIn('[data-test-input="allowedKubernetesNamespaces"]', '*');
     await click('[data-test-save]');
     this.validateRoute(assert, 'roles.role.details', 'Transitions to details route on save success');
-    await click('[data-test-crumb="roles"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(2) a');
     assert.dom('[data-test-role="new-test-role"]').exists('New role renders in list');
   });
 
@@ -94,7 +95,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     await click('[data-test-list-item-link]');
     await click('[data-test-generate-credentials]');
     this.validateRoute(assert, 'roles.role.credentials', 'Transitions to credentials route');
-    await click('[data-test-crumb="details"] a');
+    await click('[data-test-breadcrumbs] li:nth-child(3) a');
     await click('[data-test-edit]');
     this.validateRoute(assert, 'roles.role.edit', 'Transitions to edit route');
     await click('[data-test-cancel]');
diff --git a/ui/tests/integration/components/kubernetes/page/configuration-test.js b/ui/tests/integration/components/kubernetes/page/configuration-test.js
index 246f421a0737..b76dcbb5232d 100644
--- a/ui/tests/integration/components/kubernetes/page/configuration-test.js
+++ b/ui/tests/integration/components/kubernetes/page/configuration-test.js
@@ -36,10 +36,18 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h
       this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
     };
 
+    this.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.backend.id },
+    ];
+
     this.renderComponent = () => {
-      return render(hbs`<Page::Configuration @backend={{this.backend}} @config={{this.config}} />`, {
-        owner: this.engine,
-      });
+      return render(
+        hbs`<Page::Configuration @backend={{this.backend}} @config={{this.config}} @breadcrumbs={{this.breadcrumbs}} />`,
+        {
+          owner: this.engine,
+        }
+      );
     };
   });
 
diff --git a/ui/tests/integration/components/kubernetes/page/credentials-test.js b/ui/tests/integration/components/kubernetes/page/credentials-test.js
index 1e11963dcf04..19f38cb4a86a 100644
--- a/ui/tests/integration/components/kubernetes/page/credentials-test.js
+++ b/ui/tests/integration/components/kubernetes/page/credentials-test.js
@@ -28,11 +28,19 @@ module('Integration | Component | kubernetes | Page::Credentials', function (hoo
         return new Response(400, {}, { errors });
       });
     };
-
+    this.breadcrumbs = [
+      { label: this.backend, route: 'overview' },
+      { label: 'roles', route: 'roles' },
+      { label: this.roleName, route: 'roles.role.details' },
+      { label: 'credentials' },
+    ];
     this.renderComponent = () => {
-      return render(hbs`<Page::Credentials @backend={{this.backend}} @roleName={{this.roleName}} />`, {
-        owner: this.engine,
-      });
+      return render(
+        hbs`<Page::Credentials @backend={{this.backend}} @roleName={{this.roleName}} @breadcrumbs={{this.breadcrumbs}}/>`,
+        {
+          owner: this.engine,
+        }
+      );
     };
   });
 
diff --git a/ui/tests/integration/components/kubernetes/page/overview-test.js b/ui/tests/integration/components/kubernetes/page/overview-test.js
index fdbdec7425b2..18d832b2cf11 100644
--- a/ui/tests/integration/components/kubernetes/page/overview-test.js
+++ b/ui/tests/integration/components/kubernetes/page/overview-test.js
@@ -39,10 +39,13 @@ module('Integration | Component | kubernetes | Page::Overview', function (hooks)
     this.backend = this.store.peekRecord('secret-engine', 'kubernetes-test');
     this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
     this.roles = this.store.peekAll('kubernetes/role');
-
+    this.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.backend.id },
+    ];
     this.renderComponent = () => {
       return render(
-        hbs`<Page::Overview @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} />`,
+        hbs`<Page::Overview @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @breadcrumbs={{this.breadcrumbs}} />`,
         { owner: this.engine }
       );
     };
diff --git a/ui/tests/integration/components/kubernetes/page/role/details-test.js b/ui/tests/integration/components/kubernetes/page/role/details-test.js
index d85746ed49f0..97ac50c1282e 100644
--- a/ui/tests/integration/components/kubernetes/page/role/details-test.js
+++ b/ui/tests/integration/components/kubernetes/page/role/details-test.js
@@ -38,7 +38,14 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
         ...data,
       });
       this.model = store.peekRecord('kubernetes/role', data.name);
-      return render(hbs`<Page::Role::Details @model={{this.model}} />`, { owner: this.engine });
+      this.breadcrumbs = [
+        { label: this.model.backend, route: 'overview' },
+        { label: 'roles', route: 'roles' },
+        { label: this.model.name },
+      ];
+      return render(hbs`<Page::Role::Details @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
+        owner: this.engine,
+      });
     };
 
     this.assertFilteredFields = (hiddenIndices, assert) => {
@@ -71,9 +78,13 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
   test('it should render header with role name and breadcrumbs', async function (assert) {
     await this.renderComponent();
     assert.dom('[data-test-header-title]').hasText(this.model.name, 'Role name renders in header');
-    assert.dom('[data-test-crumb="overview"] a').hasText(this.model.backend, 'Overview breadcrumb renders');
-    assert.dom('[data-test-crumb="roles"] a').hasText('roles', 'Roles breadcrumb renders');
-    assert.dom('[data-test-crumb="role"]').hasText(this.model.name, 'Role breadcrumb renders');
+    assert
+      .dom('[data-test-breadcrumbs] li:nth-child(1)')
+      .containsText(this.model.backend, 'Overview breadcrumb renders');
+    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('roles', 'Roles breadcrumb renders');
+    assert
+      .dom('[data-test-breadcrumbs] li:nth-child(3)')
+      .containsText(this.model.name, 'Role breadcrumb renders');
   });
 
   test('it should render toolbar actions', async function (assert) {
diff --git a/ui/tests/integration/components/kubernetes/page/roles-test.js b/ui/tests/integration/components/kubernetes/page/roles-test.js
index f2abfe8a8207..6d29c3570681 100644
--- a/ui/tests/integration/components/kubernetes/page/roles-test.js
+++ b/ui/tests/integration/components/kubernetes/page/roles-test.js
@@ -34,10 +34,14 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
     this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
     this.roles = this.store.peekAll('kubernetes/role');
     this.filterValue = '';
+    this.breadcrumbs = [
+      { label: 'secrets', route: 'secrets', linkExternal: true },
+      { label: this.backend.id },
+    ];
 
     this.renderComponent = () => {
       return render(
-        hbs`<Page::Roles @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @filterValue={{this.filterValue}} />`,
+        hbs`<Page::Roles @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @filterValue={{this.filterValue}} @breadcrumbs={{this.breadcrumbs}} />`,
         { owner: this.engine }
       );
     };
diff --git a/ui/tests/integration/components/kubernetes/tab-page-header-test.js b/ui/tests/integration/components/kubernetes/tab-page-header-test.js
index 5a09bcc33940..beb90057b341 100644
--- a/ui/tests/integration/components/kubernetes/tab-page-header-test.js
+++ b/ui/tests/integration/components/kubernetes/tab-page-header-test.js
@@ -22,16 +22,24 @@ module('Integration | Component | kubernetes | TabPageHeader', function (hooks)
     });
     this.model = this.store.peekRecord('secret-engine', 'kubernetes-test');
     this.mount = this.model.path.slice(0, -1);
+    this.breadcrumbs = [{ label: 'secrets', route: 'secrets', linkExternal: true }, { label: this.mount }];
   });
 
   test('it should render breadcrumbs', async function (assert) {
-    await render(hbs`<TabPageHeader @model={{this.model}} />`, { owner: this.engine });
-    assert.dom('[data-test-crumb="secrets"] a').hasText('secrets', 'Secrets breadcrumb renders');
-    assert.dom('[data-test-crumb="path"]').hasText(this.mount, 'Mount path breadcrumb renders');
+    await render(hbs`<TabPageHeader @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
+      owner: this.engine,
+    });
+    assert.dom('[data-test-breadcrumbs] li:nth-child(1) a').hasText('secrets', 'Secrets breadcrumb renders');
+
+    assert
+      .dom('[data-test-breadcrumbs] li:nth-child(2)')
+      .containsText(this.mount, 'Mount path breadcrumb renders');
   });
 
   test('it should render title', async function (assert) {
-    await render(hbs`<TabPageHeader @model={{this.model}} />`, { owner: this.engine });
+    await render(hbs`<TabPageHeader @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
+      owner: this.engine,
+    });
     assert
       .dom('[data-test-header-title] svg')
       .hasClass('flight-icon-kubernetes', 'Correct icon renders in title');
@@ -39,7 +47,9 @@ module('Integration | Component | kubernetes | TabPageHeader', function (hooks)
   });
 
   test('it should render tabs', async function (assert) {
-    await render(hbs`<TabPageHeader @model={{this.model}} />`, { owner: this.engine });
+    await render(hbs`<TabPageHeader @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
+      owner: this.engine,
+    });
     assert.dom('[data-test-tab="overview"]').hasText('Overview', 'Overview tab renders');
     assert.dom('[data-test-tab="roles"]').hasText('Roles', 'Roles tab renders');
     assert.dom('[data-test-tab="config"]').hasText('Configuration', 'Configuration tab renders');
@@ -47,7 +57,7 @@ module('Integration | Component | kubernetes | TabPageHeader', function (hooks)
 
   test('it should render filter for roles', async function (assert) {
     await render(
-      hbs`<TabPageHeader @model={{this.model}} @filterRoles={{true}} @rolesFilterValue="test" />`,
+      hbs`<TabPageHeader @model={{this.model}} @filterRoles={{true}} @rolesFilterValue="test" @breadcrumbs={{this.breadcrumbs}} />`,
       { owner: this.engine }
     );
     assert.dom('[data-test-nav-input] input').hasValue('test', 'Filter renders with provided value');
@@ -56,7 +66,7 @@ module('Integration | Component | kubernetes | TabPageHeader', function (hooks)
   test('it should yield block for toolbar actions', async function (assert) {
     await render(
       hbs`
-      <TabPageHeader @model={{this.model}}>
+      <TabPageHeader @model={{this.model}} @breadcrumbs={{this.breadcrumbs}}>
         <span data-test-yield>It yields!</span>
       </TabPageHeader>
     `,