diff --git a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
index f31dc69903a7b89e1c9b8b659e0a9a76158cd316..146d1434b186af4f75dbbe1845d28b9a30f85da4 100644
--- a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
+++ b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
@@ -1,8 +1,9 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { initial, first, last } from 'lodash';
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 
 export default {
+  directives: { SafeHtml },
   props: {
     crumbs: {
       type: Array,
@@ -42,14 +43,14 @@ export default {
     <li
       v-for="(crumb, index) in rootCrumbs"
       :key="index"
+      v-safe-html="crumb.innerHTML"
       :class="crumb.className"
-      v-html="crumb.innerHTML"
     ></li>
     <li v-if="!isRootRoute">
       <router-link ref="rootRouteLink" :to="rootRoute.path">
         {{ rootRoute.meta.nameGenerator(rootRoute) }}
       </router-link>
-      <component :is="divider.tagName" :class="divider.classList" v-html="divider.innerHTML" />
+      <component :is="divider.tagName" v-safe-html="divider.innerHTML" :class="divider.classList" />
     </li>
     <li>
       <component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.className">
diff --git a/changelogs/unreleased/241964-Replace-v-html.yml b/changelogs/unreleased/241964-Replace-v-html.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1bf352acfa79a94065c066611d203a5264d67490
--- /dev/null
+++ b/changelogs/unreleased/241964-Replace-v-html.yml
@@ -0,0 +1,5 @@
+---
+title: Replace v-html with v-safe-html in registry_breadcrumb.vue
+merge_request: 41207
+author: Kev @KevSlashNull
+type: other