diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
index cb08ef2ade..213a0d400b 100644
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -15,9 +15,9 @@ const items = [{
 <template>
   <UBreadcrumb :items="items">
     <template #divider>
-      <span class="w-1 h-1 rounded-full bg-gray-400" />
-      <span class="w-8 h-1 rounded-full bg-gray-400" />
-      <span class="w-1 h-1 rounded-full bg-gray-400" />
+      <span class="w-1 h-1 rounded-full bg-gray-200" />
+      <span class="w-8 h-1 rounded-full bg-gray-300" />
+      <span class="w-1 h-1 rounded-full bg-gray-200" />
     </template>
   </UBreadcrumb>
 </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
index d95ee491e4..8c18a89e3a 100644
--- a/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleLeadingSlot.vue
@@ -15,10 +15,12 @@ const items = [{
 <template>
   <UBreadcrumb :items="items" :divider="null">
     <template #leading="{ index, isActive }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" :ui="{ rounded: 'rounded-full' }">
-        {{ index + 1 }}
-      </UBadge>
-      <span class="w-5 h-1 rounded-full me-2" :class="{ 'bg-primary-400': isActive, 'bg-gray-400': !isActive }" />
+      <UAvatar
+        :alt="(index + 1 ).toString()"
+        :ui="{ background: isActive ? 'bg-primary-100 dark:bg-primary-800 border border-primary' : 'bg-gray-100 dark:bg-gray-800 border' }"
+        size="xs"
+      />
+      <span class="w-8 h-1 rounded-full me-2" :class="[isActive ? 'bg-primary-100' : 'bg-gray-100']" />
     </template>
   </UBreadcrumb>
 </template>
diff --git a/docs/components/content/examples/BreadcrumbExampleSlot.vue b/docs/components/content/examples/BreadcrumbExampleSlot.vue
index 1ffe2d3a7e..0784ef91b4 100644
--- a/docs/components/content/examples/BreadcrumbExampleSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleSlot.vue
@@ -15,7 +15,7 @@ const items = [{
 <template>
   <UBreadcrumb :items="items">
     <template #item="{ item, isActive, index }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" variant="subtle" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" variant="outline" :class="{ 'ms-2': index === 0 }" :ui="{ rounded: 'rounded-full' }">
         {{ index + 1 }}. {{ item.text }}
       </UBadge>
     </template>
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/5.navigation/5.breadcrumb.md
index 615728b643..16dc1c44d0 100644
--- a/docs/content/5.navigation/5.breadcrumb.md
+++ b/docs/content/5.navigation/5.breadcrumb.md
@@ -1,7 +1,7 @@
 ---
 description: A Navigational that showing user's path in website's hierarchical structure.
 navigation:
-  badge: Edge
+  badge: New
 ---
 
 ## Usage
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 356a202313..83cd28b4a8 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -1,24 +1,25 @@
 <template>
   <div :class="ui.wrapper">
     <component :is="tag" :class="ui.base">
-      <component :is="itemTag" v-for="(item, key) in items" :key="key" :class="[ui.item.base, ui.size[size]]">
+      <component :is="itemTag" v-for="(item, index) in items" :key="index" :class="[ui.item.base, ui.size[size]]">
         <ULink
           v-slot="{ isActive }"
+          as="div"
           :to="item.to"
           :class="ui.item.link"
           :active-class="ui.item.active"
           :inactive-class="ui.item.inactive"
           v-bind="omit(item, ['text', 'icon', 'tag'])"
         >
-          <slot name="leading" :index="key" :is-active="isActive">
+          <slot name="leading" :index="index" :is-active="isActive">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon.size[size]" />
           </slot>
 
-          <slot name="item" :item="item" :index="key" :is-active="isActive">
+          <slot name="item" :item="item" :index="index" :is-active="isActive">
             {{ item.text }}
           </slot>
 
-          <slot v-if="key < items.length - 1" name="divider">
+          <slot v-if="index < items.length - 1" name="divider">
             <span v-if="divider" :class="ui.item.divider">
               <UIcon v-if="divider.icon" :name="divider.icon" :class="ui.icon.size[size]" />
               <span v-else>{{ divider?.text }}</span>