From eab47e872dd9a6a4aa7899c587bdb0ebe3b1678b Mon Sep 17 00:00:00 2001
From: Thomas Lamant <tom@tmlmt.com>
Date: Sat, 29 Nov 2025 02:38:29 +0100
Subject: [PATCH 1/2] fix(Breadcrumb): always shows last item as active
 regardless of route

---
 src/runtime/components/Breadcrumb.vue | 14 +++++++-------
 test/components/Breadcrumb.spec.ts    | 24 +++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 433d0fa5bd..09fcc79967 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -91,20 +91,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
       <template v-for="(item, index) in items" :key="index">
         <li data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && (index === items!.length - 1) ? 'page' : undefined" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? (index === items!.length - 1), disabled: !!item.disabled, to: !!item.to })">
-              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" :ui="ui">
-                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" :ui="ui">
-                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? (index === items!.length - 1) })" />
-                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? (index === items!.length - 1) })" />
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) ? 'page' : undefined" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? active, disabled: !!item.disabled, to: !!item.to })">
+              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? active" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? active" :index="index" :ui="ui">
+                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? active })" />
+                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? active })" />
                 </slot>
 
                 <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
-                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DynamicSlots<T, 'label'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index">
+                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DynamicSlots<T, 'label'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? active" :index="index">
                     {{ get(item, props.labelKey as string) }}
                   </slot>
                 </span>
 
-                <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DynamicSlots<T, 'trailing'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" />
+                <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DynamicSlots<T, 'trailing'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? active" :index="index" />
               </slot>
             </ULinkBase>
           </ULink>
diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
index 89194552d1..649f789552 100644
--- a/test/components/Breadcrumb.spec.ts
+++ b/test/components/Breadcrumb.spec.ts
@@ -42,7 +42,7 @@ describe('Breadcrumb', () => {
     ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
     ['with separator slot', { props, slots: { separator: () => '/' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: BreadcrumbProps, slots?: Partial<BreadcrumbSlots & { custom: () => 'Custom slot' }> }) => {
-    const html = await ComponentRender(nameOrHtml, options, Breadcrumb)
+    const html = await ComponentRender(nameOrHtml, { ...options, route: '/components/breadcrumb' }, Breadcrumb)
     expect(html).toMatchSnapshot()
   })
 
@@ -53,4 +53,26 @@ describe('Breadcrumb', () => {
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
+
+  it('highlights the current route link as active', async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: {
+        items: [{
+          label: 'Home',
+          to: '/'
+        }, {
+          label: 'Components',
+          to: '/components'
+        }, {
+          label: 'Breadcrumb',
+          to: '/components/breadcrumb'
+        }]
+      },
+      route: '/components'
+    })
+
+    const activeLink = wrapper.find('[aria-current="page"]')
+    expect(activeLink.exists()).toBe(true)
+    expect(activeLink.html()).toContain('Breadcrumb')
+  })
 })

From db3d1076abcb69860a5ddfa3c189123f6fb07687 Mon Sep 17 00:00:00 2001
From: Thomas Lamant <tom@tmlmt.com>
Date: Sat, 29 Nov 2025 03:41:36 +0100
Subject: [PATCH 2/2] test: fix expected active link text

---
 test/components/Breadcrumb.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
index 649f789552..ad5cfe756e 100644
--- a/test/components/Breadcrumb.spec.ts
+++ b/test/components/Breadcrumb.spec.ts
@@ -73,6 +73,6 @@ describe('Breadcrumb', () => {
 
     const activeLink = wrapper.find('[aria-current="page"]')
     expect(activeLink.exists()).toBe(true)
-    expect(activeLink.html()).toContain('Breadcrumb')
+    expect(activeLink.html()).toContain('Components')
   })
 })