diff --git a/packages/vue-components/src/Breadcrumb.vue b/packages/vue-components/src/Breadcrumb.vue
index a760e08015..adf57aee47 100644
--- a/packages/vue-components/src/Breadcrumb.vue
+++ b/packages/vue-components/src/Breadcrumb.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
-    <nav aria-label="breadcrumb">
+    <nav aria-label="breadcrumb" class="breadcrumb-divider">
       <ol class="breadcrumb">
+        <li class="notlink breadcrumb-marker">
+          ››&nbsp;&nbsp;
+        </li>
         <li
           v-for="(item, index) in items"
           :key="index"
@@ -80,4 +83,17 @@ export default {
     .notlink {
         color: #6d757d;
     }
+
+    .breadcrumb-divider {
+        --bs-breadcrumb-divider: '›';
+    }
+
+    /* Change font size to center arrows */
+    .breadcrumb-marker {
+        font-size: 15px;
+    }
+
+    .breadcrumb-item::before {
+        font-size: 15px;
+    }
 </style>
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Breadcrumb.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Breadcrumb.spec.js.snap
index afbc15df00..0d7c49f499 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Breadcrumb.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Breadcrumb.spec.js.snap
@@ -4,10 +4,19 @@ exports[`Breadcrumb dropdown link from sitenav 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item"
@@ -43,10 +52,19 @@ exports[`Breadcrumb dropdown non-link from sitenav 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item notlink"
@@ -80,10 +98,20 @@ exports[`Breadcrumb empty breadcrumb 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
-    />
+    >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
+    </ol>
   </nav>
 </div>
 `;
@@ -92,10 +120,20 @@ exports[`Breadcrumb no sitenav 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
-    />
+    >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
+    </ol>
   </nav>
 </div>
 `;
@@ -104,10 +142,19 @@ exports[`Breadcrumb one link 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item"
@@ -129,10 +176,19 @@ exports[`Breadcrumb one link from sitenav 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item notlink"
@@ -154,10 +210,19 @@ exports[`Breadcrumb one non-link 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item notlink"
@@ -177,10 +242,19 @@ exports[`Breadcrumb two link 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item"
@@ -214,10 +288,19 @@ exports[`Breadcrumb two non-link 1`] = `
 <div>
   <nav
     aria-label="breadcrumb"
+    class="breadcrumb-divider"
   >
     <ol
       class="breadcrumb"
     >
+      <li
+        class="notlink breadcrumb-marker"
+      >
+        
+        ››  
+      
+      </li>
+       
       <li
         aria-current="[object Object]"
         class="breadcrumb-item notlink"