diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 24c02b0f..90315262 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -55,15 +55,15 @@ const ui = computed(() => tv({ extend: breadcrumb, slots: props.ui })())
   <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: props.class })">
     <ol :class="ui.list()">
       <template v-for="(item, index) in items" :key="index">
-        <li :class="ui.itemWrapper()">
-          <ULink v-bind="pickLinkProps(item)" as="span" :aria-current="index === items!.length - 1 ? 'page' : undefined" :class="ui.item({ active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })" raw>
+        <li :class="ui.item()">
+          <ULink v-bind="pickLinkProps(item)" as="span" :aria-current="index === items!.length - 1 ? 'page' : undefined" :class="ui.link({ active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })" raw>
             <slot :name="item.slot || 'item'" :item="item" :index="index">
               <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index">
-                <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active: index === items!.length - 1 })" />
-                <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active: index === items!.length - 1 })" />
+                <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ active: index === items!.length - 1 })" />
+                <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ active: index === items!.length - 1 })" />
               </slot>
 
-              <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel()">
+              <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel()">
                 <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
                   {{ item.label }}
                 </slot>
diff --git a/src/theme/breadcrumb.ts b/src/theme/breadcrumb.ts
index 64dded6f..1269a05f 100644
--- a/src/theme/breadcrumb.ts
+++ b/src/theme/breadcrumb.ts
@@ -2,26 +2,26 @@ export default {
   slots: {
     root: 'relative min-w-0',
     list: 'flex items-center gap-1.5',
-    itemWrapper: 'flex min-w-0',
-    item: 'group relative flex items-center gap-1.5 font-medium text-sm min-w-0',
-    itemLeadingIcon: 'shrink-0 size-5',
-    itemLeadingAvatar: 'shrink-0',
-    itemLabel: 'truncate',
+    item: 'flex min-w-0',
+    link: 'group relative flex items-center gap-1.5 font-medium text-sm min-w-0',
+    linkLeadingIcon: 'shrink-0 size-5',
+    linkLeadingAvatar: 'shrink-0',
+    linkLabel: 'truncate',
     separator: 'flex',
     separatorIcon: 'shrink-0 size-5 text-gray-500 dark:text-gray-400'
   },
   variants: {
     active: {
       true: {
-        item: 'text-primary-500 dark:text-primary-400'
+        link: 'text-primary-500 dark:text-primary-400'
       },
       false: {
-        item: 'text-gray-500 dark:text-gray-400'
+        link: 'text-gray-500 dark:text-gray-400'
       }
     },
     disabled: {
       true: {
-        item: 'cursor-not-allowed opacity-75'
+        link: 'cursor-not-allowed opacity-75'
       }
     },
     to: {
@@ -33,7 +33,7 @@ export default {
     active: false,
     to: true,
     class: {
-      item: 'hover:text-gray-700 dark:hover:text-gray-200 transition-colors'
+      link: 'hover:text-gray-700 dark:hover:text-gray-200 transition-colors'
     }
   }]
 }