From 9c8e7ae04ad71f8db2e550996f45b1dd0e418292 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Fri, 17 Oct 2025 00:16:21 +0200
Subject: [PATCH] feat(VBreadcrumbs): pass props and width to items

---
 packages/docs/src/data/new-in.json                    | 11 +++++++++++
 .../src/components/VBreadcrumbs/VBreadcrumbs.tsx      |  4 +++-
 .../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx  |  6 +++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/data/new-in.json b/packages/docs/src/data/new-in.json
index 0dec7964430..6cec280bf57 100644
--- a/packages/docs/src/data/new-in.json
+++ b/packages/docs/src/data/new-in.json
@@ -31,6 +31,17 @@
       "bgColor": "3.4.0"
     }
   },
+  "VBreadcrumbs": {
+    "props": {
+      "itemProps": "3.11.0"
+    }
+  },
+  "VBreadcrumbsItem": {
+    "props": {
+      "width": "3.11.0",
+      "maxWidth": "3.11.0"
+    }
+  },
   "VBtn": {
     "props": {
       "text": "3.2.0",
diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
index 6ddca709484..27f7f73e6ec 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
@@ -18,7 +18,7 @@ import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { genericComponent, isObject, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -47,6 +47,7 @@ export const makeVBreadcrumbsProps = propsFactory({
     type: Array as PropType<readonly BreadcrumbItem[]>,
     default: () => ([]),
   },
+  itemProps: Boolean,
 
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -139,6 +140,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
                   key={ index }
                   disabled={ index >= array.length - 1 }
                   { ...(typeof item === 'string' ? { title: item } : item) }
+                  { ...(props.itemProps && isObject(raw) ? raw : {}) }
                   v-slots={{
                     default: slots.title ? () => slots.title?.({ item, index }) : undefined,
                   }}
diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx
index 00b8daf3cd7..a3319a4861d 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx
@@ -1,12 +1,13 @@
 // Composables
 import { useTextColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
+import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeRouterProps, useLink } from '@/composables/router'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { computed } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { genericComponent, pick, propsFactory, useRender } from '@/util'
 
 export const makeVBreadcrumbsItemProps = propsFactory({
   active: Boolean,
@@ -17,6 +18,7 @@ export const makeVBreadcrumbsItemProps = propsFactory({
   title: String,
 
   ...makeComponentProps(),
+  ...pick(makeDimensionProps(), ['width', 'maxWidth']),
   ...makeRouterProps(),
   ...makeTagProps({ tag: 'li' }),
 }, 'VBreadcrumbsItem')
@@ -29,6 +31,7 @@ export const VBreadcrumbsItem = genericComponent()({
   setup (props, { slots, attrs }) {
     const link = useLink(props, attrs)
     const isActive = computed(() => props.active || link.isActive?.value)
+    const { dimensionStyles } = useDimension(props)
 
     const { textColorClasses, textColorStyles } = useTextColor(
       () => isActive.value ? props.activeColor : props.color
@@ -49,6 +52,7 @@ export const VBreadcrumbsItem = genericComponent()({
           ]}
           style={[
             textColorStyles.value,
+            dimensionStyles.value,
             props.style,
           ]}
           aria-current={ isActive.value ? 'page' : undefined }