feat(VBreadcrumbs): improve accessibility and add menu when collapsed

packages/api-generator/src/locale/en/VBreadcrumbs.json

@@ -1,14 +1,19 @@
 {
   "props": {
+    "collapseInMenu": "When true, overflowing breadcrumb items are collapsed into a contextual menu rather than a static ellipsis.",
+    "collapseFrom": "Determines the number of leading breadcrumb items that remain visible before collapsing the middle items.",
     "divider": "Specifies the dividing character between items.",
+    "ellipsis": "Text displayed when breadcrumb items collapsed.",
     "icons": "Specifies that the dividers between items are [v-icon](/components/icons)s.",
     "justifyCenter": "Align the breadcrumbs center.",
     "justifyEnd": "Align the breadcrumbs at the end.",
-    "large": "Increase the font-size of the breadcrumb item text to 16px (14px default)."
+    "large": "Increase the font-size of the breadcrumb item text to 16px (14px default).",
+    "totalVisible": "Determines how many breadcrumb items can be shown before other items are collapsed."
   },
   "slots": {
     "divider": "The slot used for dividers.",
     "prepend": "The slot used for prepend content.",
-    "title": "The slot used to display the title of each breadcrumb."
+    "title": "The slot used to display the title of each breadcrumb.",
+    "listItem": "The slot used for customizing each item inside the contextual menu when breadcrumbs items are collapsed."
   }
 }

packages/docs/src/examples/v-breadcrumbs/prop-total-visible.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-container max-width="600">
+    <v-breadcrumbs
+      ref="breadcrumbsRef"
+      :collapse-from="collapseFrom"
+      :items="items"
+      :total-visible="limit"
+    ></v-breadcrumbs>
+
+    <v-breadcrumbs
+      :collapse-from="collapseFrom"
+      :items="items"
+      :total-visible="limit"
+      collapse-in-menu
+    ></v-breadcrumbs>
+
+    <div class="border-t pa-6">
+      <v-slider v-model="count" label="Items count:" max="10" step="1" thumb-label="always"></v-slider>
+      <v-slider v-model="limit" label="Collapse when exceeding:" max="10" step="1" thumb-label="always"></v-slider>
+      <v-slider v-model="collapseFrom" label="Collapse from:" max="10" step="1" thumb-label="always"></v-slider>
+      <v-btn @click="breadcrumbsRef.collapse()">Re-Collapse</v-btn>
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+  import { shallowRef, toRef } from 'vue'
+
+  const breadcrumbsRef = useTemplateRef('breadcrumbsRef')
+  const collapseFrom = shallowRef(0)
+  const count = shallowRef(6)
+  const limit = shallowRef(3)
+
+  const items = toRef(() => [
+    {
+      title: 'Dashboard',
+      disabled: false,
+      href: 'breadcrumbs_dashboard',
+    },
+    ...Array.from({ length: count.value - 1 }, (_, i) => i + 1)
+      .map(i => ({
+        title: `Link ${i}`,
+        disabled: i === count.value - 1,
+        href: `breadcrumbs_link_${i}`,
+      })),
+  ])
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      count: 6,
+      limit: 3,
+    }),
+    computed: {
+      items () {
+        return [
+          {
+            title: 'Dashboard',
+            disabled: false,
+            href: 'breadcrumbs_dashboard',
+          },
+          ...Array.from({ length: count.value - 1 }, (_, i) => ({
+            title: `Link ${i}`,
+            disabled: i === count.value - 2,
+            href: `breadcrumbs_link_${i}`,
+          })),
+        ]
+      },
+    },
+  }
+</script>

packages/docs/src/examples/v-breadcrumbs/slot-list-item.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu>
+    <template v-slot:list-item="{ item, index }">
+      <v-list-item :key="index" :disabled="item.disabled" :href="item.href">
+        <v-list-item-title>
+          <span v-if="item.disabled">🔒 </span>{{ item.title }}
+        </v-list-item-title>
+      </v-list-item>
+    </template>
+  </v-breadcrumbs>
+</template>
+
+<script setup>
+  const items = [
+    {
+      title: 'Dashboard',
+      disabled: false,
+      href: 'breadcrumbs_dashboard',
+    },
+    {
+      title: 'Link 1',
+      disabled: false,
+      href: 'breadcrumbs_link_1',
+    },
+    {
+      title: 'Link 2',
+      disabled: true,
+      href: 'breadcrumbs_link_2',
+    },
+    {
+      title: 'Link 3',
+      disabled: false,
+      href: 'breadcrumbs_link_3',
+    },
+    {
+      title: 'Link 4',
+      disabled: true,
+      href: 'breadcrumbs_link_4',
+    },
+  ]
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      items: [
+        {
+          title: 'Dashboard',
+          disabled: false,
+          href: 'breadcrumbs_dashboard',
+        },
+        {
+          title: 'Link 1',
+          disabled: false,
+          href: 'breadcrumbs_link_1',
+        },
+        {
+          title: 'Link 2',
+          disabled: false,
+          href: 'breadcrumbs_link_2',
+        },
+        {
+          title: 'Link 3',
+          disabled: false,
+          href: 'breadcrumbs_link_3',
+        },
+        {
+          title: 'Link 4',
+          disabled: true,
+          href: 'breadcrumbs_link_4',
+        },
+      ],
+    }),
+  }
+</script>

packages/docs/src/pages/en/components/breadcrumbs.md

@@ -59,6 +59,13 @@ Breadcrumbs separator can be set using `divider` property.
 
 <ExamplesExample file="v-breadcrumbs/prop-divider" />
 
+#### Total visible
+
+You can use the `total-visible` prop to limit the visible items. Items that exceed limit are displayed after clicking on "..." item. The default behavior can be changed with `collapse-in-menu` to display the collapsed items inside a dropdown menu.
+You can also use the `collapse-from` prop to control how many leading items remain visible before collapsing items.
+
+<ExamplesExample file="v-breadcrumbs/prop-total-visible" />
+
 ### Slots
 
 #### Prepend
@@ -78,3 +85,9 @@ To customize the divider, use the `divider` slot.
 You can use the `title` slot to customize each breadcrumb title.
 
 <ExamplesExample file="v-breadcrumbs/slot-title" />
+
+#### Menu list item
+
+You can use the `list-item` slot to customize how each breadcrumb item is rendered inside the collapsed menu when `collapse-in-menu` is enabled.
+
+<ExamplesExample file="v-breadcrumbs/slot-list-item" />

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass

@@ -5,6 +5,7 @@
   .v-breadcrumbs
     display: flex
     align-items: center
+    flex-wrap: wrap
     line-height: $breadcrumbs-line-height
     padding: $breadcrumbs-padding-y $breadcrumbs-padding-x
 
@@ -28,6 +29,9 @@
     text-decoration: none
     vertical-align: $breadcrumbs-vertical-align
 
+    &--ellipsis
+      cursor: pointer
+
     &--disabled
       opacity: $breadcrumbs-item-disabled-opacity
       pointer-events: none