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

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

@@ -1,14 +1,18 @@
 {
   "props": {
+    "collapseInMenu": "When true, overflowing breadcrumb items are collapsed into a contextual menu rather than a static ellipsis.",
     "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 middle 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/slot-collapse-in-menu.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu>
+  </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: false,
+      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/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/examples/v-breadcrumbs/slot-total-visible.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-breadcrumbs :items="items" :total-visible="3">
+  </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: false,
+      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

@@ -78,3 +78,21 @@ 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" />
+
+#### Collapsed breadcrumbs
+
+You can use the `totalVisible` prop to redefine the maximum number of breadcrumb items displayed before the component collapses.
+
+<ExamplesExample file="v-breadcrumbs/slot-total-visible" />
+
+#### Collapsed with menu
+
+You can use the `collapseInMenu` prop to display the collapsed breadcrumb items inside a dropdown menu.
+
+<ExamplesExample file="v-breadcrumbs/slot-collapse-in-menu" />
+
+#### Collapsed with custom menu
+
+You can use the `list-item` slot to customize how each breadcrumb item is rendered inside the collapsed menu when `collapseInMenu` is enabled.
+
+<ExamplesExample file="v-breadcrumbs/slot-list-item" />

packages/vuetify/playgrounds/Playground.breadcrumbs.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-breadcrumbs :items="items" :total-visible="3" />
+      <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu />
+      <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>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+  export default {
+    name: 'Playground',
+    data: () => ({
+      items: Array.from({ length: 4 }, (k, v) => ({ title: `Link ${v + 1}`, href: `breadcrumbs_link_${v + 1}`, disabled: v === 2 })),
+    }),
+  }
+</script>

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