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

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

@@ -1,10 +1,13 @@
 {
   "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.",

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-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,15 @@ 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" />

packages/vuetify/playgrounds/Playground.breadcrumbs.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-breadcrumbs :items="items" :total-visible="3" />
+      <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu />
+    </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}` })),
+    }),
+  }
+</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

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -4,8 +4,10 @@ import './VBreadcrumbs.sass'
 // Components
 import { VBreadcrumbsDivider } from './VBreadcrumbsDivider'
 import { VBreadcrumbsItem } from './VBreadcrumbsItem'
+import { VIcon } from '../VIcon'
+import { VList, VListItem, VListItemTitle } from '../VList'
+import { VMenu } from '../VMenu'
 import { VDefaultsProvider } from '@/components/VDefaultsProvider'
-import { VIcon } from '@/components/VIcon'
 
 // Composables
 import { useBackgroundColor } from '@/composables/color'
@@ -17,8 +19,8 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { computed, toRef } from 'vue'
-import { genericComponent, isObject, propsFactory, useRender } from '@/util'
+import { computed, ref, toRef, watch } from 'vue'
+import { genericComponent, isObject, noop, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -36,23 +38,29 @@ export const makeVBreadcrumbsProps = propsFactory({
   activeClass: String,
   activeColor: String,
   bgColor: String,
+  collapseInMenu: Boolean,
   color: String,
   disabled: Boolean,
   divider: {
     type: String,
     default: '/',
   },
+  ellipsis: {
+    type: String,
+    default: '...',
+  },
   icon: IconValue,
   items: {
     type: Array as PropType<readonly BreadcrumbItem[]>,
     default: () => ([]),
   },
   itemProps: Boolean,
+  totalVisible: Number,
 
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
-  ...makeTagProps({ tag: 'ul' }),
+  ...makeTagProps({ tag: 'nav' }),
 }, 'VBreadcrumbs')
 
 export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
@@ -91,12 +99,23 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
     const items = computed(() => props.items.map(item => {
       return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }
     }))
+    const showEllipsis = toRef(() => props.totalVisible ? items.value.length > props.totalVisible : false)
+    const enableEllipsis = ref(showEllipsis.value)
+
+    const onClickEllipsis = () => {
+      enableEllipsis.value = false
+    }
+
+    watch(showEllipsis, (value: boolean) => {
+      enableEllipsis.value = value
+    })
 
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.icon)
 
       return (
         <props.tag
+          aria-label="breadcrumbs"
           class={[
             'v-breadcrumbs',
             backgroundColorClasses.value,
@@ -109,6 +128,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
             props.style,
           ]}
         >
+          <ol>
           { hasPrepend && (
             <li key="prepend" class="v-breadcrumbs__prepend">
               { !slots.prepend ? (
@@ -133,7 +153,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
             </li>
           )}
 
-          { items.value.map(({ item, raw }, index, array) => (
+          { !enableEllipsis.value && items.value.map(({ item, raw }, index, array) => (
             <>
               { slots.item?.({ item, index }) ?? (
                 <VBreadcrumbsItem
@@ -157,7 +177,68 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
             </>
           ))}
 
+          { enableEllipsis.value && (
+            <>
+              { (() => {
+                const { item } = items.value[0]
+                return (
+                  <>
+                    { slots.item?.({ item, index: 0 }) ?? (
+                      <VBreadcrumbsItem
+                        disabled={ false }
+                        { ...(typeof item === 'string' ? { title: item } : item) }
+                      />
+                    )}
+                  </>
+                )
+              })()}
+
+              <VBreadcrumbsDivider />
+
+              <VBreadcrumbsItem
+                tabindex="0"
+                onClick={ props.collapseInMenu ? noop : onClickEllipsis }
+                class="v-breadcrumbs-item--ellipsis"
+              >
+                { props.ellipsis }
+                { props.collapseInMenu ? (
+                  <VMenu activator="parent">
+                    {{
+                      default: () => (
+                        <VList>
+                          { items.value.slice(1, items.value.length - 1).map(({ item }, index) => (
+                            <VListItem key={ index } value={ index } component="a" href={ 'href' in item ? item.href : undefined }>
+                              <VListItemTitle>{ item.title }</VListItemTitle>
+                            </VListItem>
+                          ))}
+                        </VList>
+                      ),
+                    }}
+                  </VMenu>
+                ) : null }
+              </VBreadcrumbsItem>
+
+              <VBreadcrumbsDivider />
+
+              { (() => {
+                const lastIndex = items.value.length - 1
+                const { item } = items.value[lastIndex]
+                return (
+                  <>
+                    { slots.item?.({ item, index: lastIndex }) ?? (
+                      <VBreadcrumbsItem
+                        disabled
+                        { ...(typeof item === 'string' ? { title: item } : item) }
+                      />
+                    )}
+                  </>
+                )
+              })()}
+            </>
+          )}
+
           { slots.default?.() }
+          </ol>
         </props.tag>
       )
     })