diff --git a/changelog/24387.txt b/changelog/24387.txt
new file mode 100644
index 0000000000..3e7fe85c25
--- /dev/null
+++ b/changelog/24387.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Implement Helios Design System Breadcrumbs
+```
\ No newline at end of file
diff --git a/ui/app/styles/components/empty-state-component.scss b/ui/app/styles/components/empty-state-component.scss
index e84caec496..abac11593b 100644
--- a/ui/app/styles/components/empty-state-component.scss
+++ b/ui/app/styles/components/empty-state-component.scss
@@ -53,9 +53,6 @@
   a,
   .link,
   a:not(.button):not(.file-delete-button):not(.tag) {
-    color: $blue;
-    font-size: $size-8;
-    font-weight: $font-weight-semibold;
     text-decoration: none;
   }
 
diff --git a/ui/app/styles/components/page-header-old.scss b/ui/app/styles/components/page-header-old.scss
index 67813b5b35..d5a9c37ae9 100644
--- a/ui/app/styles/components/page-header-old.scss
+++ b/ui/app/styles/components/page-header-old.scss
@@ -26,7 +26,7 @@
   }
 
   .title {
-    margin-top: $spacing-36;
+    margin-top: $spacing-16;
   }
 
   .title-with-icon {
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 1c8dcc675d..d7732800fe 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -21,7 +21,6 @@
 
 // Core Styles: each file styles a class that is not associated with a component. Ex: box and not box-label.
 @import './core/box';
-@import './core/breadcrumb';
 @import './core/buttons';
 @import './core/charts';
 @import './core/checkbox-and-radio';
diff --git a/ui/app/styles/core/breadcrumb.scss b/ui/app/styles/core/breadcrumb.scss
deleted file mode 100644
index c31eab5e38..0000000000
--- a/ui/app/styles/core/breadcrumb.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-.breadcrumb {
-  display: flex;
-  user-select: text;
-  min-height: 1.5rem;
-  margin: 0;
-  overflow-x: auto;
-  white-space: nowrap;
-
-  &:not(:last-child) {
-    margin: 0;
-  }
-
-  ul,
-  ol {
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: flex-start;
-  }
-
-  li {
-    align-items: center;
-    display: flex;
-
-    & + li::before {
-      display: none;
-    }
-
-    &:first-child {
-      .sep {
-        margin-left: 0;
-      }
-    }
-    &.is-active a {
-      color: $grey-darkest;
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  a {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    line-height: 1;
-    padding: 0 $size-11 0 0;
-    text-decoration: none;
-
-    &:hover {
-      color: $blue;
-    }
-  }
-
-  .sep {
-    display: inline-block;
-    color: transparent;
-    margin: 0.15rem 0.4rem 0 0.5rem;
-    overflow: hidden;
-    width: 0.5rem;
-
-    &::before {
-      color: $blue;
-      content: '❮';
-      font-size: 1rem;
-      line-height: 1;
-      opacity: 0.33;
-    }
-  }
-}
diff --git a/ui/app/templates/components/generate-credentials-database.hbs b/ui/app/templates/components/generate-credentials-database.hbs
index 41662eab29..78b448fcf2 100644
--- a/ui/app/templates/components/generate-credentials-database.hbs
+++ b/ui/app/templates/components/generate-credentials-database.hbs
@@ -5,16 +5,14 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend.overview" @model={{@backendPath}}>
-            {{@backendPath}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text={{@backendPath}}
+        @route="vault.cluster.secrets.backend.overview"
+        @model={{@backendPath}}
+      />
+      <Hds::Breadcrumb::Item @text={{@roleName}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 data-test-title class="title is-3">
@@ -33,18 +31,12 @@
       @bottomBorder={{true}}
       @message={{@model.errorMessage}}
     >
-      <nav class="breadcrumb" aria-label="help breadcrumb">
-        <ul class="is-grouped-split">
-          <li>
-            {{! Empty because they can't go "back" anywhere }}
-          </li>
-          <li>
-            <DocLink @path="/vault/docs/secrets/databases" @class="has-text-grey">
-              Need help?
-            </DocLink>
-          </li>
-        </ul>
-      </nav>
+      <Hds::Link::Standalone
+        @iconPosition="trailing"
+        @icon="docs-link"
+        @text="Database documentation"
+        @href={{doc-link "/vault/docs/secrets/databases"}}
+      />
     </EmptyState>
   {{/unless}}
   {{#if (and (not @model.errorMessage) (eq @roleType "dynamic"))}}
diff --git a/ui/app/templates/components/generate-credentials.hbs b/ui/app/templates/components/generate-credentials.hbs
index c13966ada8..3540bf1110 100644
--- a/ui/app/templates/components/generate-credentials.hbs
+++ b/ui/app/templates/components/generate-credentials.hbs
@@ -5,28 +5,17 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend" @model={{this.backendPath}} data-test-link="role-list">
-            {{this.backendPath}}
-          </LinkTo>
-        </li>
-        <li class="is-active">
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend" @model={{this.backendPath}}>
-            creds
-          </LinkTo>
-        </li>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.roleName}}>
-            {{this.roleName}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text={{this.backendPath}}
+        @route="vault.cluster.secrets.backend"
+        @model={{this.backendPath}}
+        data-test-link="role-list"
+      />
+      <Hds::Breadcrumb::Item @text="Credentials" @route="vault.cluster.secrets.backend" @model={{this.backendPath}} />
+      <Hds::Breadcrumb::Item @text={{this.roleName}} @route="vault.cluster.secrets.backend.show" @model={{this.roleName}} />
+      <Hds::Breadcrumb::Item @text={{this.options.title}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 data-test-title class="title is-3">
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
index 1ab971cd03..24ba19ee42 100644
--- a/ui/app/templates/components/generated-item-list.hbs
+++ b/ui/app/templates/components/generated-item-list.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KeyValueHeader @path="vault.cluster.access.methods">
-      <li>
-        <span class="sep">
-          /
-        </span>
-        <LinkTo @route="vault.cluster.access.methods" data-test-access-methods>
-          methods
-        </LinkTo>
-      </li>
-    </KeyValueHeader>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" data-test-access-methods />
+      <Hds::Breadcrumb::Item @text={{@methodModel.id}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/components/generated-item.hbs b/ui/app/templates/components/generated-item.hbs
index 71706bfa52..60cf6bfa06 100644
--- a/ui/app/templates/components/generated-item.hbs
+++ b/ui/app/templates/components/generated-item.hbs
@@ -5,18 +5,14 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">
-            /
-          </span>
-          <LinkTo @route="vault.cluster.access.method.item.list" @model={{this.itemType}}>
-            {{pluralize this.itemType}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text={{pluralize this.itemType}}
+        @route="vault.cluster.access.method.item.list"
+        @model={{this.itemType}}
+      />
+      <Hds::Breadcrumb::Item @text={{if (eq this.mode "show") this.model.id (capitalize this.mode)}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     {{#if (eq this.mode "show")}}
diff --git a/ui/app/templates/components/mfa/mfa-login-enforcement-header.hbs b/ui/app/templates/components/mfa/mfa-login-enforcement-header.hbs
index f2c37a084f..571c6c70dc 100644
--- a/ui/app/templates/components/mfa/mfa-login-enforcement-header.hbs
+++ b/ui/app/templates/components/mfa/mfa-login-enforcement-header.hbs
@@ -8,16 +8,10 @@
 {{else}}
   <PageHeader as |p|>
     <p.top>
-      <nav class="breadcrumb">
-        <ul>
-          <li>
-            <span class="sep">&#x0002f;</span>
-            <LinkTo @route="vault.cluster.access.mfa.enforcements.index">
-              Enforcements
-            </LinkTo>
-          </li>
-        </ul>
-      </nav>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item @text="Enforcements" @route="vault.cluster.access.mfa.enforcements.index" />
+        <Hds::Breadcrumb::Item @text={{@heading}} @current={{true}} />
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3" data-test-mleh-title>
diff --git a/ui/app/templates/components/oidc/client-form.hbs b/ui/app/templates/components/oidc/client-form.hbs
index d789ad9287..8e885510a6 100644
--- a/ui/app/templates/components/oidc/client-form.hbs
+++ b/ui/app/templates/components/oidc/client-form.hbs
@@ -5,22 +5,18 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          {{#if @model.isNew}}
-            <LinkTo @route="vault.cluster.access.oidc.clients">
-              Applications
-            </LinkTo>
-          {{else}}
-            <LinkTo @route="vault.cluster.access.oidc.clients.client.details" @model={{@model.name}}>
-              Details
-            </LinkTo>
-          {{/if}}
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      {{#if @model.isNew}}
+        <Hds::Breadcrumb::Item @text="Applications" @route="vault.cluster.access.oidc.clients" />
+      {{else}}
+        <Hds::Breadcrumb::Item
+          @text="Details"
+          @route="vault.cluster.access.oidc.clients.client.details"
+          @model={{@model.name}}
+        />
+      {{/if}}
+      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Application" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-client-title>
diff --git a/ui/app/templates/components/oidc/key-form.hbs b/ui/app/templates/components/oidc/key-form.hbs
index 77e983fd1d..fa4f1f6e27 100644
--- a/ui/app/templates/components/oidc/key-form.hbs
+++ b/ui/app/templates/components/oidc/key-form.hbs
@@ -5,22 +5,14 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          {{#if @model.isNew}}
-            <LinkTo @route="vault.cluster.access.oidc.keys">
-              Keys
-            </LinkTo>
-          {{else}}
-            <LinkTo @route="vault.cluster.access.oidc.keys.key.details" @model={{@model.name}}>
-              Details
-            </LinkTo>
-          {{/if}}
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      {{#if @model.isNew}}
+        <Hds::Breadcrumb::Item @text="Keys" @route="vault.cluster.access.oidc.keys" />
+      {{else}}
+        <Hds::Breadcrumb::Item @text="Details" @route="vault.cluster.access.oidc.keys.key.details" @model={{@model.name}} />
+      {{/if}}
+      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Key" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-key-title>
diff --git a/ui/app/templates/components/oidc/provider-form.hbs b/ui/app/templates/components/oidc/provider-form.hbs
index b09ca7a2cf..57625b6fbd 100644
--- a/ui/app/templates/components/oidc/provider-form.hbs
+++ b/ui/app/templates/components/oidc/provider-form.hbs
@@ -5,22 +5,18 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          {{#if @model.isNew}}
-            <LinkTo @route="vault.cluster.access.oidc.providers">
-              Providers
-            </LinkTo>
-          {{else}}
-            <LinkTo @route="vault.cluster.access.oidc.providers.provider.details" @model={{@model.name}}>
-              Details
-            </LinkTo>
-          {{/if}}
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      {{#if @model.isNew}}
+        <Hds::Breadcrumb::Item @text="Providers" @route="vault.cluster.access.oidc.providers" />
+      {{else}}
+        <Hds::Breadcrumb::Item
+          @text="Details"
+          @route="vault.cluster.access.oidc.providers.provider.details"
+          @model={{@model.name}}
+        />
+      {{/if}}
+      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Provider" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-provider-title>
diff --git a/ui/app/templates/components/oidc/scope-form.hbs b/ui/app/templates/components/oidc/scope-form.hbs
index f6e3667982..5d14013a2f 100644
--- a/ui/app/templates/components/oidc/scope-form.hbs
+++ b/ui/app/templates/components/oidc/scope-form.hbs
@@ -5,23 +5,18 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          {{#if @model.isNew}}
-            <LinkTo @route={{"vault.cluster.access.oidc.scopes"}}>
-              Scopes
-            </LinkTo>
-          {{else}}
-            {{! You're editing in this view }}
-            <LinkTo @route={{"vault.cluster.access.oidc.scopes.scope.details"}} @model={{@model.name}}>
-              Details
-            </LinkTo>
-          {{/if}}
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      {{#if @model.isNew}}
+        <Hds::Breadcrumb::Item @text="Scopes" @route="vault.cluster.access.oidc.scopes" />
+      {{else}}
+        <Hds::Breadcrumb::Item
+          @text="Details"
+          @route="vault.cluster.access.oidc.scopes.scope.details"
+          @model={{@model.name}}
+        />
+      {{/if}}
+      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Scope" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-scope-title>
diff --git a/ui/app/templates/components/raft-storage-restore.hbs b/ui/app/templates/components/raft-storage-restore.hbs
index 826aeb9003..9166fff952 100644
--- a/ui/app/templates/components/raft-storage-restore.hbs
+++ b/ui/app/templates/components/raft-storage-restore.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="key-value-header breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.storage">
-            Raft Storage
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Raft Storage" @route="vault.cluster.storage" />
+      <Hds::Breadcrumb::Item @text="Restore Snapshot" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs b/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs
index 9f26a1f730..5ffe7c4082 100644
--- a/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs
@@ -5,16 +5,13 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.identity.aliases">
-            {{pluralize (humanize this.model.identityType)}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text={{capitalize (pluralize (humanize this.model.identityType))}}
+        @route="vault.cluster.access.identity.aliases"
+      />
+      <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/identity/show.hbs b/ui/app/templates/vault/cluster/access/identity/show.hbs
index 0403806ec2..fac6af720a 100644
--- a/ui/app/templates/vault/cluster/access/identity/show.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/show.hbs
@@ -5,16 +5,13 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.identity.index">
-            {{capitalize (pluralize this.model.identityType)}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text={{capitalize (pluralize this.model.identityType)}}
+        @route="vault.cluster.access.identity.index"
+      />
+      <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/method/section.hbs b/ui/app/templates/vault/cluster/access/method/section.hbs
index 6ac3118752..19d69e4c5b 100644
--- a/ui/app/templates/vault/cluster/access/method/section.hbs
+++ b/ui/app/templates/vault/cluster/access/method/section.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KeyValueHeader @path="vault.cluster.access.methods">
-      <li>
-        <span class="sep">
-          /
-        </span>
-        <LinkTo @route="vault.cluster.access.methods">
-          methods
-        </LinkTo>
-      </li>
-    </KeyValueHeader>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" />
+      <Hds::Breadcrumb::Item @text={{this.model.id}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs b/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs
index b56c2bfb80..a93bce4935 100644
--- a/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.mfa.enforcements.index">
-            Enforcements
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Enforcements" @route="vault.cluster.access.mfa.enforcements.index" />
+      <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs
index 2bac109738..c086047be0 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs
@@ -4,6 +4,12 @@
 ~}}
 
 <PageHeader as |p|>
+  <p.top>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Methods" @route="vault.cluster.access.mfa.methods.index" />
+      <Hds::Breadcrumb::Item @text="Configure MFA Method" @current={{true}} />
+    </Hds::Breadcrumb>
+  </p.top>
   <p.levelLeft class="has-border-bottom-light">
     <h1 class="title is-3">
       {{#if this.method}}
@@ -15,18 +21,6 @@
       {{/if}}
     </h1>
   </p.levelLeft>
-  <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.mfa.methods.index">
-            Methods
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
-  </p.top>
 </PageHeader>
 <div class="has-border-top-light has-top-padding-l">
   {{#if this.showForms}}
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
index 303c5b579b..a29f43e2cc 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.mfa.methods.index">
-            Methods
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Methods" @route="vault.cluster.access.mfa.methods.index" />
+      <Hds::Breadcrumb::Item @text={{this.model.method.name}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/namespaces/create.hbs b/ui/app/templates/vault/cluster/access/namespaces/create.hbs
index 74ecb753f5..7281f4c5d4 100644
--- a/ui/app/templates/vault/cluster/access/namespaces/create.hbs
+++ b/ui/app/templates/vault/cluster/access/namespaces/create.hbs
@@ -6,12 +6,10 @@
 {{#if (has-feature "Namespaces")}}
   <PageHeader as |p|>
     <p.top>
-      <div class="breadcrumb">
-        <LinkTo @route="vault.cluster.access.namespaces.index">
-          <span class="sep">&#x0002f;</span>
-          Namespaces
-        </LinkTo>
-      </div>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item @text="Namespaces" @route="vault.cluster.access.namespaces.index" />
+        <Hds::Breadcrumb::Item @text="Create" @current={{true}} />
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
index 394a077b42..4630547ddb 100644
--- a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.oidc.assignments">
-            Assignments
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Assignments" @route="vault.cluster.access.oidc.assignments" />
+      <Hds::Breadcrumb::Item @text={{@model.name}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-assignment-title>
diff --git a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/edit.hbs b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/edit.hbs
index 44c38463bb..78b6c3a31e 100644
--- a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/edit.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/edit.hbs
@@ -5,16 +5,14 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route={{"vault.cluster.access.oidc.assignments.assignment.details"}} @model={{this.model.name}}>
-            Details
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text="Details"
+        @route="vault.cluster.access.oidc.assignments.assignment.details"
+        @model={{this.model.name}}
+      />
+      <Hds::Breadcrumb::Item @text="Edit Assignment" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-assignment-title>
diff --git a/ui/app/templates/vault/cluster/access/oidc/assignments/create.hbs b/ui/app/templates/vault/cluster/access/oidc/assignments/create.hbs
index 298c52d3e4..70ba32d8c1 100644
--- a/ui/app/templates/vault/cluster/access/oidc/assignments/create.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/assignments/create.hbs
@@ -5,16 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route={{"vault.cluster.access.oidc.assignments"}}>
-            Assignments
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Assignments" @route="vault.cluster.access.oidc.assignments" />
+      <Hds::Breadcrumb::Item @text="Create Assignment" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-assignment-title>
diff --git a/ui/app/templates/vault/cluster/access/oidc/clients/client.hbs b/ui/app/templates/vault/cluster/access/oidc/clients/client.hbs
index 3ae8a3ea08..5464933978 100644
--- a/ui/app/templates/vault/cluster/access/oidc/clients/client.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/clients/client.hbs
@@ -6,16 +6,10 @@
 {{#if this.showHeader}}
   <PageHeader as |p|>
     <p.top>
-      <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li>
-            <span class="sep">&#x0002f;</span>
-            <LinkTo @route="vault.cluster.access.oidc.clients">
-              Applications
-            </LinkTo>
-          </li>
-        </ul>
-      </nav>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item @text="Applications" @route="vault.cluster.access.oidc.clients" />
+        <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3" data-test-oidc-client-header>
diff --git a/ui/app/templates/vault/cluster/access/oidc/keys/key.hbs b/ui/app/templates/vault/cluster/access/oidc/keys/key.hbs
index f5ca3375b8..8ed90248a7 100644
--- a/ui/app/templates/vault/cluster/access/oidc/keys/key.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/keys/key.hbs
@@ -6,16 +6,10 @@
 {{#if this.showHeader}}
   <PageHeader as |p|>
     <p.top>
-      <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li>
-            <span class="sep">&#x0002f;</span>
-            <LinkTo @route="vault.cluster.access.oidc.keys" data-test-breadcrumb-link="oidc-keys">
-              Keys
-            </LinkTo>
-          </li>
-        </ul>
-      </nav>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item @text="Keys" @route="vault.cluster.access.oidc.keys" data-test-breadcrumb-link="oidc-keys" />
+        <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/oidc/providers/provider.hbs b/ui/app/templates/vault/cluster/access/oidc/providers/provider.hbs
index 2f53c81591..abdcb1235c 100644
--- a/ui/app/templates/vault/cluster/access/oidc/providers/provider.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/providers/provider.hbs
@@ -6,16 +6,14 @@
 {{#if this.showHeader}}
   <PageHeader as |p|>
     <p.top>
-      <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li>
-            <span class="sep">&#x0002f;</span>
-            <LinkTo @route="vault.cluster.access.oidc.providers" data-test-breadcrumb-link="oidc-providers">
-              Providers
-            </LinkTo>
-          </li>
-        </ul>
-      </nav>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item
+          @text="Providers"
+          @route="vault.cluster.access.oidc.providers"
+          data-test-breadcrumb-link="oidc-providers"
+        />
+        <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
index 2ab49a2f45..343afaa83d 100644
--- a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
@@ -5,16 +5,14 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.access.oidc.scopes" data-test-breadcrumb-link="oidc-scopes">
-            Scopes
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text="Scopes"
+        @route="vault.cluster.access.oidc.scopes"
+        data-test-breadcrumb-link="oidc-scopes"
+      />
+      <Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-oidc-scope-header>
diff --git a/ui/app/templates/vault/cluster/policies/create.hbs b/ui/app/templates/vault/cluster/policies/create.hbs
index c477fa7508..a8cd4aae50 100644
--- a/ui/app/templates/vault/cluster/policies/create.hbs
+++ b/ui/app/templates/vault/cluster/policies/create.hbs
@@ -5,13 +5,15 @@
 
 <PageHeader as |p|>
   <p.top>
-    <div class="breadcrumb">
-      <LinkTo @route="vault.cluster.policies" @model={{this.policyType}} data-test-policy-list-link={{true}}>
-        <span class="sep">&#x0002f;</span>
-        {{uppercase this.policyType}}
-        Policies
-      </LinkTo>
-    </div>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text="{{uppercase this.policyType}} policies"
+        @route="vault.cluster.policies"
+        @model={{this.policyType}}
+        data-test-policy-list-link
+      />
+      <Hds::Breadcrumb::Item @text="Create" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs
index 57e97c3041..fce8584b15 100644
--- a/ui/app/templates/vault/cluster/policy/edit.hbs
+++ b/ui/app/templates/vault/cluster/policy/edit.hbs
@@ -5,15 +5,16 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <li>
-        <LinkTo @route="vault.cluster.policies" @model={{this.policyType}} data-test-policy-list-link={{true}}>
-          <span class="sep">&#x0002f;</span>
-          {{uppercase this.policyType}}
-          policies
-        </LinkTo>
-      </li>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text="{{uppercase this.policyType}} policies"
+        @route="vault.cluster.policies"
+        @model={{this.policyType}}
+        data-test-policy-list-link
+      />
+      <Hds::Breadcrumb::Item @text={{this.model.id}} @route="vault.cluster.policy.show" @model={{this.model.id}} />
+      <Hds::Breadcrumb::Item @text="Edit" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs
index cf028c6b2d..3b4162431a 100644
--- a/ui/app/templates/vault/cluster/policy/show.hbs
+++ b/ui/app/templates/vault/cluster/policy/show.hbs
@@ -5,15 +5,15 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <li>
-        <LinkTo @route="vault.cluster.policies" @model={{this.policyType}} data-test-policy-list-link={{true}}>
-          <span class="sep">&#x0002f;</span>
-          {{uppercase this.policyType}}
-          policies
-        </LinkTo>
-      </li>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item
+        @text="{{uppercase this.policyType}} policies"
+        @route="vault.cluster.policies"
+        @model={{this.policyType}}
+        data-test-policy-list-link
+      />
+      <Hds::Breadcrumb::Item @text={{this.model.id}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-policy-name="true">
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
index d1e055f5e4..abe5e4b16d 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -13,22 +13,18 @@
           @message={{Page.message}}
           @icon="alert-circle"
           @bottomBorder={{true}}
+          class="is-shadowless"
         >
-          <nav class="breadcrumb">
-            <ul class="is-grouped-split">
-              <li>
-                <LinkTo @route="vault.cluster.secrets.backends">
-                  <span class="sep"></span>
-                  Go back
-                </LinkTo>
-              </li>
-              <li>
-                <DocLink @path="/vault/tutorials/enterprise/disaster-recovery" @class="has-text-grey">
-                  Need help?
-                </DocLink>
-              </li>
-            </ul>
-          </nav>
+          <Hds::ButtonSet>
+            <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
+            <Hds::Link::Standalone
+              @icon="learn-link"
+              @iconPosition="trailing"
+              @color="secondary"
+              @text="Disaster recovery tutorial"
+              @href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
+            />
+          </Hds::ButtonSet>
         </EmptyState>
       {{else}}
         <Page.dashboard
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
index 29c41cf893..8d6cf42f20 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
@@ -14,21 +14,16 @@
           @icon="alert-circle"
           @bottomBorder={{true}}
         >
-          <nav class="breadcrumb">
-            <ul class="is-grouped-split">
-              <li>
-                <LinkTo @route="vault.cluster.secrets.backends">
-                  <span class="sep"></span>
-                  Go back
-                </LinkTo>
-              </li>
-              <li>
-                <DocLink @path="/vault/tutorials/enterprise/disaster-recovery" @class="has-text-grey">
-                  Need help?
-                </DocLink>
-              </li>
-            </ul>
-          </nav>
+          <Hds::ButtonSet>
+            <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
+            <Hds::Link::Standalone
+              @icon="learn-link"
+              @iconPosition="trailing"
+              @color="secondary"
+              @text="Disaster recovery tutorial"
+              @href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
+            />
+          </Hds::ButtonSet>
         </EmptyState>
       {{else}}
         <section>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/error.hbs b/ui/app/templates/vault/cluster/secrets/backend/error.hbs
index 9a0d83beff..b82bbe4772 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/error.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/error.hbs
@@ -6,14 +6,12 @@
 <div class="box is-shadowless">
   <PageHeader as |p|>
     <p.top>
-      <nav class="breadcrumb">
-        <li>
-          <LinkTo @route={{if this.model.backend "vault.cluster.secrets.backend.list-root" "vault.cluster.secrets"}}>
-            <span class="sep">&#x0002f;</span>
-            {{if this.model.backend this.model.backend "secrets"}}
-          </LinkTo>
-        </li>
-      </nav>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item
+          @text={{if this.model.backend this.model.backend "Secrets"}}
+          @route={{if this.model.backend "vault.cluster.secrets.backend.list-root" "vault.cluster.secrets"}}
+        />
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3 has-text-grey">
diff --git a/ui/app/templates/vault/cluster/secrets/backend/sign.hbs b/ui/app/templates/vault/cluster/secrets/backend/sign.hbs
index 3484f783de..23bcb1af17 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/sign.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/sign.hbs
@@ -5,28 +5,16 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb">
-      <ul>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend" @model={{this.backend.id}}>
-            ssh
-          </LinkTo>
-        </li>
-        <li class="is-active">
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend" @model={{this.backend.id}}>
-            sign
-          </LinkTo>
-        </li>
-        <li>
-          <span class="sep">&#x0002f;</span>
-          <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.model.role.name}}>
-            {{this.model.role.name}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="SSH" @route="vault.cluster.secrets.backend" @model={{this.backend.id}} />
+      <Hds::Breadcrumb::Item @text="Sign" @route="vault.cluster.secrets.backend" @model={{this.backend.id}} />
+      <Hds::Breadcrumb::Item
+        @text={{this.model.role.name}}
+        @route="vault.cluster.secrets.backend.show"
+        @model={{this.model.role.name}}
+      />
+      <Hds::Breadcrumb::Item @text="Sign SSH Key" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/app/templates/vault/cluster/settings/auth/configure.hbs b/ui/app/templates/vault/cluster/settings/auth/configure.hbs
index c66946307b..4014d5310b 100644
--- a/ui/app/templates/vault/cluster/settings/auth/configure.hbs
+++ b/ui/app/templates/vault/cluster/settings/auth/configure.hbs
@@ -5,7 +5,11 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KeyValueHeader @baseKey={{this.model}} @path="vault.cluster.access.method" @root={{this.root}} @showCurrent={{true}} />
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" />
+      <Hds::Breadcrumb::Item @text={{this.model.id}} @route="vault.cluster.access.method" @model={{this.model.id}} />
+      <Hds::Breadcrumb::Item @text="Configure" @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/core/addon/components/key-value-header.hbs b/ui/lib/core/addon/components/key-value-header.hbs
index 7309eb45f3..6966b58f12 100644
--- a/ui/lib/core/addon/components/key-value-header.hbs
+++ b/ui/lib/core/addon/components/key-value-header.hbs
@@ -3,25 +3,17 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
-  <ul>
-    {{yield}}
-    {{#each this.secretPath as |path index|}}
-      <li class={{if (is-active-route path.path path.model isExact=true) "is-active"}}>
-        <span class="sep">&#x0002f;</span>
-        {{#if this.linkToPaths}}
-          <LinkTo
-            @route={{path.path}}
-            @model={{path.model}}
-            data-test-secret-root-link={{if (eq index 0) true false}}
-            data-test-secret-breadcrumb={{path.text}}
-          >
-            {{path.text}}
-          </LinkTo>
-        {{else}}
-          <span>{{path.text}}</span>
-        {{/if}}
-      </li>
-    {{/each}}
-  </ul>
-</nav>
\ No newline at end of file
+<Hds::Breadcrumb>
+  {{#each this.secretPath as |path|}}
+    {{#if this.linkToPaths}}
+      <Hds::Breadcrumb::Item
+        @text={{path.text}}
+        @route={{path.path}}
+        @model={{path.model}}
+        data-test-secret-breadcrumb={{path.text}}
+      />
+    {{else}}
+      <Hds::Breadcrumb::Item @text={{path.text}} @current={{true}} />
+    {{/if}}
+  {{/each}}
+</Hds::Breadcrumb>
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/page/breadcrumbs.hbs b/ui/lib/core/addon/components/page/breadcrumbs.hbs
index 8766b8b866..da4d672ee8 100644
--- a/ui/lib/core/addon/components/page/breadcrumbs.hbs
+++ b/ui/lib/core/addon/components/page/breadcrumbs.hbs
@@ -3,29 +3,19 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
-  <ul>
-    {{#each @breadcrumbs as |breadcrumb idx|}}
-      <li data-test-crumb="{{idx}}">
-        <span class="sep">/</span>
-        {{#if breadcrumb.linkExternal}}
-          <LinkToExternal @route={{breadcrumb.route}} data-test-breadcrumb={{breadcrumb.label}}>
-            {{breadcrumb.label}}
-          </LinkToExternal>
-        {{else if breadcrumb.route}}
-          {{#if breadcrumb.model}}
-            <LinkTo @route={{breadcrumb.route}} @model={{breadcrumb.model}} data-test-breadcrumb={{breadcrumb.label}}>
-              {{breadcrumb.label}}
-            </LinkTo>
-          {{else}}
-            <LinkTo @route={{breadcrumb.route}} data-test-breadcrumb={{breadcrumb.label}}>
-              {{breadcrumb.label}}
-            </LinkTo>
-          {{/if}}
-        {{else}}
-          {{breadcrumb.label}}
-        {{/if}}
-      </li>
-    {{/each}}
-  </ul>
-</nav>
\ No newline at end of file
+<Hds::Breadcrumb data-test-breadcrumbs>
+  {{#each @breadcrumbs as |breadcrumb|}}
+    <Hds::Breadcrumb::Item
+      data-test-breadcrumb={{breadcrumb.label}}
+      @text={{breadcrumb.label}}
+      @icon={{breadcrumb.icon}}
+      @route={{breadcrumb.route}}
+      @model={{breadcrumb.model}}
+      @models={{breadcrumb.models}}
+      @query={{breadcrumb.query}}
+      @isRouteExternal={{breadcrumb.linkExternal}}
+      {{! only generate a link for crumbs with a route, otherwise assume it's the current view }}
+      @current={{not breadcrumb.route}}
+    />
+  {{/each}}
+</Hds::Breadcrumb>
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/page/breadcrumbs.js b/ui/lib/core/addon/components/page/breadcrumbs.js
deleted file mode 100644
index 395686cb87..0000000000
--- a/ui/lib/core/addon/components/page/breadcrumbs.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-/**
- * @module Page::Breadcrumbs
- * Page::Breadcrumbs components are used to display breadcrumb links. This is component will be replaced when HDS system is incorporated
- *
- * @example
- * ```js
- * <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}}  />
- * ```
- * @param {array} breadcrumbs - array of objects with a label and route to display as breadcrumbs
- */
-
-export default class Breadcrumbs extends Component {
-  constructor() {
-    super(...arguments);
-    this.args.breadcrumbs.forEach((breadcrumb) => {
-      assert('breadcrumb must have a label key', Object.keys(breadcrumb).includes('label'));
-    });
-  }
-}
diff --git a/ui/lib/core/addon/components/page/breadcrumbs.ts b/ui/lib/core/addon/components/page/breadcrumbs.ts
new file mode 100644
index 0000000000..8d33e99179
--- /dev/null
+++ b/ui/lib/core/addon/components/page/breadcrumbs.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+interface Args {
+  breadcrumbs: Array<Breadcrumb>;
+}
+interface Breadcrumb {
+  label: string;
+  route?: string; // Do not provide for current route
+  icon?: string;
+  model?: string;
+  models?: string[];
+  linkToExternal?: boolean;
+}
+
+/**
+ * @module Page::Breadcrumbs
+ * Page::Breadcrumbs components are used to display an array of breadcrumbs at the top of the page.
+ *
+ * @example
+ * ```js
+ * <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}}  />
+ * ```
+ * @param {array} breadcrumbs - array of Breadcrumb objects, must contain a label key. If no route is provided, crumb is assumed to be the current page
+ */
+
+export default class Breadcrumbs extends Component<Args> {
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    assert(
+      'breadcrumb object must include a label key',
+      this.args.breadcrumbs.every((crumb) => Object.keys(crumb).includes('label'))
+    );
+  }
+}
diff --git a/ui/lib/core/addon/components/secret-list-header.hbs b/ui/lib/core/addon/components/secret-list-header.hbs
index 0162f1921f..1374ab5e9b 100644
--- a/ui/lib/core/addon/components/secret-list-header.hbs
+++ b/ui/lib/core/addon/components/secret-list-header.hbs
@@ -6,16 +6,18 @@
 {{#let (options-for-backend @model.engineType) as |options|}}
   <PageHeader as |p|>
     <p.top>
-      <KeyValueHeader @baseKey={{@baseKey}} @path="vault.cluster.secrets.backend.list" @root={{@backendCrumb}}>
-        <li>
-          <span class="sep">
-            /
-          </span>
-          <LinkTo @route="vault.cluster.secrets">
-            secrets
-          </LinkTo>
-        </li>
-      </KeyValueHeader>
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item @text="Secrets" @route="vault.cluster.secrets" />
+        <Hds::Breadcrumb::Item
+          @text={{@model.id}}
+          @current={{not @isConfigure}}
+          @route="vault.cluster.secrets.backend.list-root"
+          @model={{@model.id}}
+        />
+        {{#if @isConfigure}}
+          <Hds::Breadcrumb::Item @text="Configure" @current={{true}} />
+        {{/if}}
+      </Hds::Breadcrumb>
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
index 286a636841..a790e3f30c 100644
--- a/ui/lib/core/addon/templates/components/replication-header.hbs
+++ b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -5,19 +5,12 @@
 
 <PageHeader as |p|>
   <p.top>
-    {{! template-lint-configure simple-unless "warn" }}
-    {{#unless (or this.isSummaryDashboard this.isSecondary)}}
-      <KeyValueHeader @baseKey={{this.baseKey}} @path="vault.cluster.replication-dr-promote" @root={{this.backendCrumb}}>
-        <li>
-          <span class="sep">
-            /
-          </span>
-          <LinkTo @route="vault.cluster.replication.index">
-            Replication
-          </LinkTo>
-        </li>
-      </KeyValueHeader>
-    {{/unless}}
+    {{#if (not (or this.isSummaryDashboard this.isSecondary))}}
+      <Hds::Breadcrumb>
+        <Hds::Breadcrumb::Item @text="Replication" @route="vault.cluster.replication.index" />
+        <Hds::Breadcrumb::Item @text={{this.title}} @current={{true}} />
+      </Hds::Breadcrumb>
+    {{/if}}
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-replication-title>
diff --git a/ui/lib/kmip/addon/components/header-credentials.hbs b/ui/lib/kmip/addon/components/header-credentials.hbs
index 6943de405e..78a0e3fe1b 100644
--- a/ui/lib/kmip/addon/components/header-credentials.hbs
+++ b/ui/lib/kmip/addon/components/header-credentials.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @scope={{@scope}} />
+    <KmipBreadcrumb @scope={{@scope}} @currentRoute={{@role}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/components/header-scope.hbs b/ui/lib/kmip/addon/templates/components/header-scope.hbs
index 285cfe4e5b..37c5544fe3 100644
--- a/ui/lib/kmip/addon/templates/components/header-scope.hbs
+++ b/ui/lib/kmip/addon/templates/components/header-scope.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb />
+    <KmipBreadcrumb @currentRoute={{this.secretMountPath.currentPath}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/components/kmip-breadcrumb.hbs b/ui/lib/kmip/addon/templates/components/kmip-breadcrumb.hbs
index dff4436797..90cb408179 100644
--- a/ui/lib/kmip/addon/templates/components/kmip-breadcrumb.hbs
+++ b/ui/lib/kmip/addon/templates/components/kmip-breadcrumb.hbs
@@ -3,31 +3,18 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<nav class="key-value-header breadcrumb">
-  <ul>
-    <li>
-      <span class="sep">&#x0002f;</span>
-      <LinkToExternal @route="secrets">Secrets</LinkToExternal>
-    </li>
-    {{#if this.shouldShowPath}}
-      <li>
-        <span class="sep">&#x0002f;</span>
-        <LinkTo @route="scopes.index">
-          {{this.secretMountPath.currentPath}}
-        </LinkTo>
-      </li>
-    {{/if}}
-    {{#if @scope}}
-      <li>
-        <span class="sep">&#x0002f;</span>
-        <LinkTo @route="scope.roles" @model={{@scope}}>{{@scope}}</LinkTo>
-      </li>
-    {{/if}}
-    {{#if @role}}
-      <li>
-        <span class="sep">&#x0002f;</span>
-        <LinkTo @route="credentials.index" @models={{array @scope @role}}>{{@role}}</LinkTo>
-      </li>
-    {{/if}}
-  </ul>
-</nav>
\ No newline at end of file
+<Hds::Breadcrumb>
+  <Hds::Breadcrumb::Item @text="Secrets" @route="secrets" @isRouteExternal={{true}} />
+  {{#if this.shouldShowPath}}
+    <Hds::Breadcrumb::Item @text={{this.secretMountPath.currentPath}} @route="scopes.index" />
+  {{/if}}
+  {{#if @scope}}
+    <Hds::Breadcrumb::Item @text={{@scope}} @route="scope.roles" @model={{@scope}} />
+  {{/if}}
+  {{#if @role}}
+    <Hds::Breadcrumb::Item @text={{@role}} @route="credentials.index" @models={{array @scope @role}} />
+  {{/if}}
+  {{#if @currentRoute}}
+    <Hds::Breadcrumb::Item @text={{@currentRoute}} @current={{true}} />
+  {{/if}}
+</Hds::Breadcrumb>
\ No newline at end of file
diff --git a/ui/lib/kmip/addon/templates/configure.hbs b/ui/lib/kmip/addon/templates/configure.hbs
index 3027ca2968..26172f82b6 100644
--- a/ui/lib/kmip/addon/templates/configure.hbs
+++ b/ui/lib/kmip/addon/templates/configure.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @showPath={{true}} />
+    <KmipBreadcrumb @showPath={{true}} @currentRoute="Configure" />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/credentials/generate.hbs b/ui/lib/kmip/addon/templates/credentials/generate.hbs
index d8429ff834..7446f16ec0 100644
--- a/ui/lib/kmip/addon/templates/credentials/generate.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/generate.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
+    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Generate Credentials" />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/credentials/show.hbs b/ui/lib/kmip/addon/templates/credentials/show.hbs
index 2688857e76..868cea644d 100644
--- a/ui/lib/kmip/addon/templates/credentials/show.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/show.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
+    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Credentials" />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/role/edit.hbs b/ui/lib/kmip/addon/templates/role/edit.hbs
index dc488e8fd5..ab2003d857 100644
--- a/ui/lib/kmip/addon/templates/role/edit.hbs
+++ b/ui/lib/kmip/addon/templates/role/edit.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
+    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Edit Role" />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index 03863a15df..506eec8acd 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @showPath={{true}} />
+    <KmipBreadcrumb @showPath={{true}} @currentRoute={{this.scope}} />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/kmip/addon/templates/scope/roles/create.hbs b/ui/lib/kmip/addon/templates/scope/roles/create.hbs
index dc4af7e7a6..42fcc4bf40 100644
--- a/ui/lib/kmip/addon/templates/scope/roles/create.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles/create.hbs
@@ -5,7 +5,7 @@
 
 <PageHeader as |p|>
   <p.top>
-    <KmipBreadcrumb @scope={{this.scope}} />
+    <KmipBreadcrumb @scope={{this.scope}} @currentRoute="Create Role" />
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
diff --git a/ui/lib/pki/addon/components/pki-page-header.hbs b/ui/lib/pki/addon/components/pki-page-header.hbs
index dbf676af58..aca3e4445e 100644
--- a/ui/lib/pki/addon/components/pki-page-header.hbs
+++ b/ui/lib/pki/addon/components/pki-page-header.hbs
@@ -5,18 +5,10 @@
 
 <PageHeader as |p|>
   <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <span class="sep">/</span>
-          <LinkToExternal @route="secrets">secrets</LinkToExternal>
-        </li>
-        <li>
-          <span class="sep">/</span>
-          <span>{{@backend.id}}</span>
-        </li>
-      </ul>
-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Secrets" @route="secrets" @isRouteExternal={{true}} />
+      <Hds::Breadcrumb::Item @text={{@backend.id}} @current={{true}} />
+    </Hds::Breadcrumb>
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3" data-test-header-title>
diff --git a/ui/lib/replication/addon/templates/mode.hbs b/ui/lib/replication/addon/templates/mode.hbs
index acedb3788d..1cd17605f8 100644
--- a/ui/lib/replication/addon/templates/mode.hbs
+++ b/ui/lib/replication/addon/templates/mode.hbs
@@ -11,20 +11,10 @@
       {{#if this.model.replicationAttrs.replicationEnabled}}
         <PageHeader as |p|>
           <p.top>
-            <nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
-              <ul>
-                <li>
-                  <LinkTo @route="index">
-                    <span class="sep" data-test-replication-breadcrumb></span>
-                    Replication
-                  </LinkTo>
-                </li>
-                <li>
-                  <span class="sep"></span>
-                  {{this.model.replicationModeForDisplay}}
-                </li>
-              </ul>
-            </nav>
+            <Hds::Breadcrumb>
+              <Hds::Breadcrumb::Item @text="Replication" @route="index" data-test-replication-breadcrumb />
+              <Hds::Breadcrumb::Item @text={{this.model.replicationModeForDisplay}} @current={{true}} />
+            </Hds::Breadcrumb>
           </p.top>
           <p.levelLeft>
             <h1 class="has-top-margin-m title is-3" data-test-replication-title={{true}}>
diff --git a/ui/tests/acceptance/auth-list-test.js b/ui/tests/acceptance/auth-list-test.js
index 9aa51b8cde..450b9c95eb 100644
--- a/ui/tests/acceptance/auth-list-test.js
+++ b/ui/tests/acceptance/auth-list-test.js
@@ -21,7 +21,7 @@ const SELECTORS = {
   input: (attr) => `[data-test-input="${attr}"]`,
   password: '[data-test-textarea]',
   saveBtn: '[data-test-save-config]',
-  methods: '[data-test-access-methods]',
+  methods: '[data-test-access-methods] a',
   listItem: '[data-test-list-item-content]',
 };
 module('Acceptance | auth backend list', function (hooks) {
diff --git a/ui/tests/acceptance/aws-test.js b/ui/tests/acceptance/aws-test.js
index a84fb44027..ee0b2bbfce 100644
--- a/ui/tests/acceptance/aws-test.js
+++ b/ui/tests/acceptance/aws-test.js
@@ -75,8 +75,7 @@ module('Acceptance | aws secret backend', function (hooks) {
       `/vault/secrets/${path}/show/${roleName}`,
       `$aws: navigates to the show page on creation`
     );
-
-    await click('[data-test-secret-root-link]');
+    await click(`[data-test-secret-breadcrumb="${path}"] a`);
 
     assert.strictEqual(currentURL(), `/vault/secrets/${path}/list`);
     assert.ok(findAll(`[data-test-secret-link="${roleName}"]`).length, `aws: role shows in the list`);
diff --git a/ui/tests/acceptance/mfa-login-enforcement-test.js b/ui/tests/acceptance/mfa-login-enforcement-test.js
index 61220c0d8c..4f8ecbd277 100644
--- a/ui/tests/acceptance/mfa-login-enforcement-test.js
+++ b/ui/tests/acceptance/mfa-login-enforcement-test.js
@@ -69,7 +69,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
       'Cancel transitions to enforcements list'
     );
     await click('[data-test-enforcement-create]');
-    await click('.breadcrumb a');
+    await click('.hds-breadcrumb a');
     assert.strictEqual(
       currentRouteName(),
       'vault.cluster.access.mfa.enforcements.index',
@@ -121,7 +121,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
       'vault.cluster.access.mfa.enforcements.enforcement.index',
       'Details more menu action transitions to enforcement route'
     );
-    await click('.breadcrumb a');
+    await click('.hds-breadcrumb a');
     await click('[data-test-popup-menu-trigger]');
     await click('[data-test-list-item-link="edit"]');
     assert.strictEqual(
diff --git a/ui/tests/acceptance/mfa-method-test.js b/ui/tests/acceptance/mfa-method-test.js
index 19f9256d9d..95d82d9b4f 100644
--- a/ui/tests/acceptance/mfa-method-test.js
+++ b/ui/tests/acceptance/mfa-method-test.js
@@ -61,7 +61,7 @@ module('Acceptance | mfa-method', function (hooks) {
       'vault.cluster.access.mfa.methods.create',
       'New method link transitions to create route'
     );
-    await click('.breadcrumb a');
+    await click('.hds-breadcrumb a');
 
     const methods = this.getMethods();
     const model = this.store.peekRecord('mfa-method', methods[0].id);
@@ -81,7 +81,7 @@ module('Acceptance | mfa-method', function (hooks) {
       'vault.cluster.access.mfa.methods.method.index',
       'Details more menu action transitions to method route'
     );
-    await click('.breadcrumb a');
+    await click('.hds-breadcrumb a');
     await click('[data-test-popup-menu-trigger]');
     await click('[data-test-mfa-method-menu-link="edit"]');
     assert.strictEqual(
@@ -140,7 +140,7 @@ module('Acceptance | mfa-method', function (hooks) {
         const value = typeof model[key] === 'boolean' ? (model[key] ? 'Yes' : 'No') : model[key].toString();
         assert.dom(`[data-test-value-div="${label}"]`).hasText(value, `${label} value renders`);
       });
-      await click('.breadcrumb a');
+      await click('.hds-breadcrumb a');
     }
 
     await click('[data-test-mfa-method-list-item]');
@@ -203,7 +203,7 @@ module('Acceptance | mfa-method', function (hooks) {
         'vault.cluster.access.mfa.methods.method.index',
         `${type} method is displayed on save`
       );
-      await click('.breadcrumb a');
+      await click('.hds-breadcrumb a');
       assert
         .dom('[data-test-mfa-method-list-item]')
         .exists({ count: methodCount + index + 1 }, `List updates with new ${type} method`);
diff --git a/ui/tests/acceptance/oidc-config/clients-keys-test.js b/ui/tests/acceptance/oidc-config/clients-keys-test.js
index b28a9759d7..524cbabcd1 100644
--- a/ui/tests/acceptance/oidc-config/clients-keys-test.js
+++ b/ui/tests/acceptance/oidc-config/clients-keys-test.js
@@ -100,7 +100,7 @@ module('Acceptance | oidc-config clients and keys', function (hooks) {
       .exists('lists correct app with default');
 
     // create a new key
-    await click('[data-test-breadcrumb-link="oidc-keys"]');
+    await click('[data-test-breadcrumb-link="oidc-keys"] a');
     assert.strictEqual(
       currentRouteName(),
       'vault.cluster.access.oidc.keys.index',
diff --git a/ui/tests/acceptance/oidc-config/providers-scopes-test.js b/ui/tests/acceptance/oidc-config/providers-scopes-test.js
index 7ae77c2a44..544fe7eda1 100644
--- a/ui/tests/acceptance/oidc-config/providers-scopes-test.js
+++ b/ui/tests/acceptance/oidc-config/providers-scopes-test.js
@@ -114,7 +114,7 @@ module('Acceptance |  oidc-config providers and scopes', function (hooks) {
     );
 
     // navigate to details from index page
-    await click('[data-test-breadcrumb-link="oidc-scopes"]');
+    await click('[data-test-breadcrumb-link="oidc-scopes"] a');
     await click('[data-test-popup-menu-trigger]');
     await click('[data-test-oidc-scope-menu-link="details"]');
     assert.strictEqual(
@@ -224,7 +224,7 @@ module('Acceptance |  oidc-config providers and scopes', function (hooks) {
       .hasText('this is an edit test', 'has correct edited description');
 
     // create a provider using test-scope
-    await click('[data-test-breadcrumb-link="oidc-scopes"]');
+    await click('[data-test-breadcrumb-link="oidc-scopes"] a');
     await click('[data-test-tab="providers"]');
     assert.dom('[data-test-tab="providers"]').hasClass('active', 'providers tab is active');
     await click('[data-test-oidc-provider-create]');
@@ -368,7 +368,7 @@ module('Acceptance |  oidc-config providers and scopes', function (hooks) {
     );
 
     // navigate to details from index page
-    await click('[data-test-breadcrumb-link="oidc-providers"]');
+    await click('[data-test-breadcrumb-link="oidc-providers"] a');
     assert.strictEqual(
       currentRouteName(),
       'vault.cluster.access.oidc.providers.index',
diff --git a/ui/tests/acceptance/policies-acl-old-test.js b/ui/tests/acceptance/policies-acl-old-test.js
index 156c44686c..3415f0e5d6 100644
--- a/ui/tests/acceptance/policies-acl-old-test.js
+++ b/ui/tests/acceptance/policies-acl-old-test.js
@@ -44,8 +44,7 @@ module('Acceptance | policies (old)', function (hooks) {
     );
     assert.dom('[data-test-policy-name]').hasText(policyLower, 'displays the policy name on the show page');
     assert.dom('[data-test-flash-message].is-info').doesNotExist('no flash message is displayed on save');
-    await click('[data-test-policy-list-link]');
-
+    await click('[data-test-policy-list-link] a');
     assert
       .dom(`[data-test-policy-link="${policyLower}"]`)
       .exists({ count: 1 }, 'new policy shown in the list');
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index 7ec61209f6..e12d6f9cbb 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -281,7 +281,7 @@ module('Acceptance | secrets/secret/create, read, delete', function (hooks) {
         'secret path is encoded in URL'
       );
       assert.dom('h1').hasText(secretPath, 'Path renders correctly on show page');
-      await click(`[data-test-secret-breadcrumb="${firstPath}"]`);
+      await click(`[data-test-secret-breadcrumb="${firstPath}"] a`);
       assert.strictEqual(
         currentURL(),
         `/vault/secrets/${enginePath}/list/${encodeURIComponent(firstPath)}/`,
@@ -325,7 +325,7 @@ module('Acceptance | secrets/secret/create, read, delete', function (hooks) {
       await listPage.filterInput('filter/foo1');
       assert.strictEqual(listPage.secrets.length, 1, 'renders only one secret');
       await listPage.secrets.objectAt(0).click();
-      await showPage.breadcrumbs.filterBy('text', 'filter')[0].click();
+      await click('[data-test-secret-breadcrumb="filter"] a');
       assert.strictEqual(listPage.secrets.length, 3, 'renders three secrets');
       assert.strictEqual(listPage.filterInputValue, 'filter/', 'pageFilter has been reset');
     });
diff --git a/ui/tests/acceptance/secrets/backend/ldap/libraries-test.js b/ui/tests/acceptance/secrets/backend/ldap/libraries-test.js
index 10bc31f23e..a031465137 100644
--- a/ui/tests/acceptance/secrets/backend/ldap/libraries-test.js
+++ b/ui/tests/acceptance/secrets/backend/ldap/libraries-test.js
@@ -54,7 +54,7 @@ module('Acceptance | ldap | libraries', function (hooks) {
         isURL(`libraries/test-library/${uri}`),
         `Transitions to ${action} route on list item action menu click`
       );
-      await click('[data-test-breadcrumb="libraries"]');
+      await click('[data-test-breadcrumb="libraries"] a');
     }
   });
 
diff --git a/ui/tests/acceptance/secrets/backend/ldap/overview-test.js b/ui/tests/acceptance/secrets/backend/ldap/overview-test.js
index 1882d9ea6b..75723e4374 100644
--- a/ui/tests/acceptance/secrets/backend/ldap/overview-test.js
+++ b/ui/tests/acceptance/secrets/backend/ldap/overview-test.js
@@ -55,7 +55,7 @@ module('Acceptance | ldap | overview', function (hooks) {
     await click('[data-test-config-cta] a');
     assert.true(isURL('configure'), 'Transitions to configure route on cta link click');
 
-    await click('[data-test-breadcrumb="ldap-test"]');
+    await click('[data-test-breadcrumb="ldap-test"] a');
     await click('[data-test-toolbar-action="config"]');
     assert.true(isURL('configure'), 'Transitions to configure route on toolbar link click');
   });
@@ -92,7 +92,7 @@ module('Acceptance | ldap | overview', function (hooks) {
       'Transitions to role credentials route on generate credentials action'
     );
 
-    await click('[data-test-breadcrumb="ldap-test"]');
+    await click('[data-test-breadcrumb="ldap-test"] a');
     await selectChoose('.search-select', 'dynamic-role');
     await click('[data-test-generate-credential-button]');
     assert.true(
diff --git a/ui/tests/acceptance/secrets/backend/ldap/roles-test.js b/ui/tests/acceptance/secrets/backend/ldap/roles-test.js
index b2bd30c895..f912b9a147 100644
--- a/ui/tests/acceptance/secrets/backend/ldap/roles-test.js
+++ b/ui/tests/acceptance/secrets/backend/ldap/roles-test.js
@@ -42,7 +42,7 @@ module('Acceptance | ldap | roles', function (hooks) {
       'Transitions to role details route on list item click'
     );
 
-    await click('[data-test-breadcrumb="roles"]');
+    await click('[data-test-breadcrumb="roles"] a');
     await click('[data-test-list-item-link]:nth-of-type(2) a');
     assert.true(
       isURL('roles/static/static-role/details'),
@@ -61,7 +61,7 @@ module('Acceptance | ldap | roles', function (hooks) {
         isURL(`roles/dynamic/dynamic-role/${uri}`),
         `Transitions to ${uri} route on list item action menu click`
       );
-      await click('[data-test-breadcrumb="roles"]');
+      await click('[data-test-breadcrumb="roles"] a');
     }
   });
 
@@ -73,7 +73,7 @@ module('Acceptance | ldap | roles', function (hooks) {
       'Transitions to credentials route from toolbar link'
     );
 
-    await click('[data-test-breadcrumb="dynamic-role"]');
+    await click('[data-test-breadcrumb="dynamic-role"] a');
     await click('[data-test-edit]');
     assert.true(isURL('roles/dynamic/dynamic-role/edit'), 'Transitions to edit route from toolbar link');
   });
diff --git a/ui/tests/acceptance/transit-test.js b/ui/tests/acceptance/transit-test.js
index a755531095..82d89de6e0 100644
--- a/ui/tests/acceptance/transit-test.js
+++ b/ui/tests/acceptance/transit-test.js
@@ -17,7 +17,7 @@ const SELECTORS = {
   popupMenu: '[data-test-popup-menu-trigger]',
   versionsTab: '[data-test-transit-link="versions"]',
   actionsTab: '[data-test-transit-key-actions-link]',
-  rootCrumb: '[data-test-secret-root-link]',
+  rootCrumb: (path) => `[data-test-secret-breadcrumb="${path}"] a`,
   card: (action) => `[data-test-transit-card="${action}"]`,
   infoRow: (label) => `[data-test-value-div="${label}"]`,
   form: (item) => `[data-test-transit-key="${item}"]`,
@@ -242,7 +242,7 @@ module('Acceptance | transit (flaky)', function (hooks) {
     assert.dom(SELECTORS.infoRow('Deletion allowed')).hasText('false');
     assert.dom(SELECTORS.infoRow('Derived')).hasText('Yes');
     assert.dom(SELECTORS.infoRow('Convergent encryption')).hasText('Yes');
-    await click(SELECTORS.rootCrumb);
+    await click(SELECTORS.rootCrumb(this.path));
     await click(SELECTORS.popupMenu);
     const actions = findAll('.ember-basic-dropdown-content li');
     assert.strictEqual(actions.length, 2, 'shows 2 items in popup menu');
diff --git a/ui/tests/helpers/kv/kv-selectors.js b/ui/tests/helpers/kv/kv-selectors.js
index 14546c0899..742d6217fa 100644
--- a/ui/tests/helpers/kv/kv-selectors.js
+++ b/ui/tests/helpers/kv/kv-selectors.js
@@ -8,7 +8,7 @@ export const PAGE = {
   title: '[data-test-header-title]',
   breadcrumbs: '[data-test-breadcrumbs]',
   breadcrumb: '[data-test-breadcrumbs] li',
-  breadcrumbAtIdx: (idx) => `[data-test-crumb="${idx}"] a`,
+  breadcrumbAtIdx: (idx) => `[data-test-breadcrumbs] li:nth-child(${idx + 1}) a`,
   infoRow: '[data-test-component="info-table-row"]',
   infoRowValue: (label) => `[data-test-value-div="${label}"]`,
   infoRowToggleMasked: (label) => `[data-test-value-div="${label}"] [data-test-button="toggle-masked"]`,
diff --git a/ui/tests/integration/components/kv/kv-page-header-test.js b/ui/tests/integration/components/kv/kv-page-header-test.js
index 6e4d5cf729..33fa47b22e 100644
--- a/ui/tests/integration/components/kv/kv-page-header-test.js
+++ b/ui/tests/integration/components/kv/kv-page-header-test.js
@@ -50,8 +50,8 @@ module('Integration | Component | kv | kv-page-header', function (hooks) {
     assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').hasText(this.backend, 'engine name renders');
     assert.dom('[data-test-breadcrumbs] li:nth-child(3) a').hasText(this.path, 'secret path renders');
     assert
-      .dom('[data-test-breadcrumbs] li:nth-child(4)')
-      .hasText('/ edit', 'final breadcrumb renders and it is not a link.');
+      .dom('[data-test-breadcrumbs] li:nth-child(4) .hds-breadcrumb__current')
+      .exists('final breadcrumb renders and it is not a link.');
   });
 
   test('it renders a custom title for a non engine view', async function (assert) {
diff --git a/ui/tests/pages/secrets/backend/kv/show.js b/ui/tests/pages/secrets/backend/kv/show.js
index f97afd0ae6..fd689d015e 100644
--- a/ui/tests/pages/secrets/backend/kv/show.js
+++ b/ui/tests/pages/secrets/backend/kv/show.js
@@ -4,13 +4,10 @@
  */
 
 import { Base } from '../show';
-import { create, clickable, collection, isPresent, text } from 'ember-cli-page-object';
+import { create, clickable, collection, isPresent } from 'ember-cli-page-object';
 
 export default create({
   ...Base,
-  breadcrumbs: collection('[data-test-secret-breadcrumb]', {
-    text: text(),
-  }),
   deleteBtnV1: clickable('[data-test-secret-v1-delete]'),
   confirmBtn: clickable('[data-test-confirm-button]'),
   rows: collection('data-test-row-label'),