semantic elements (nav, ol, li) for improved screen-reader support and better compliance with accessibility standards
automatically wrap to a new line when the breadcrumb trail becomes too long, preventing overflow
newtotal-visible prop limits how many items can be displayed before collapsing items into an ellipsis
optionalcollapse-in-menu for displaying the hidden items inside an accessible dropdown menu
menu-props,list-props, and#list-item slot - for deep customization

Markup:

<template>  <v-app>    <v-container>      <h5>show only 2 links</h5>      <v-breadcrumbs:items="items":total-visible="2" />      <h5>responsive</h5>      <v-breadcrumbs:items="items":total-visible="$vuetify.display.mdAndDown ? 2 : 7"collapse-from="1" />      <h5>menu (default)</h5>      <v-breadcrumbs:items="items":total-visible="3"collapse-in-menu />      <h5>menu (customized)</h5>      <v-breadcrumbs:items="items":list-props="{ class: 'pa-1', nav: true, rounded: 'lg', bgColor: 'primary' }":menu-props="{ location: 'left top' }":total-visible="5"collapse-in-menu      >        <template #list-item="{item }">          <v-list-itemv-bind="item":prepend-icon="item.disabled ? 'mdi-lock' : 'mdi-link'"class="mt-0"prepend-gap="12"          />        </template>      </v-breadcrumbs>    </v-container>  </v-app></template><script>exportdefault {    name:'Playground',data: ()=> ({      items:Array.from({ length:9 }, (k,v)=> ({        title:`Link${v+1}`,        href:`breadcrumbs_link_${v+1}`,        disabled: v===2,        prependIcon: v===2?'mdi-lock':'mdi-link',      })),    }),  }</script>

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

a7b13a4

J-Sek requested changes

Nov 21, 2025

View reviewed changes

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx OutdatedShow resolvedHide resolved

packages/api-generator/src/locale/en/VBreadcrumbs.json OutdatedShow resolvedHide resolved

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx OutdatedShow resolvedHide resolved

J-Sek reviewed

Nov 21, 2025

View reviewed changes

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx OutdatedShow resolvedHide resolved

jdflaugergues force-pushed thefeat/improve-breadcrumbs branch 4 times, most recently fromffc8c40 to2a3bd3eCompare

November 21, 2025 15:37

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

c77b459

jdflaugergues force-pushed thefeat/improve-breadcrumbs branch from2a3bd3e toc77b459Compare

November 21, 2025 15:44

J-Sek reviewed

Nov 21, 2025

View reviewed changes

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx OutdatedShow resolvedHide resolved

jdflaugergues force-pushed thefeat/improve-breadcrumbs branch 3 times, most recently fromd9084ec to738d8d0Compare

November 24, 2025 08:44

feat(VBreadcrumbs): add list-item slot for customizing collapsed menu

e7a63f3

jdflaugergues force-pushed thefeat/improve-breadcrumbs branch from738d8d0 toe7a63f3Compare

November 24, 2025 09:09

J-Sek added5 commits

November 24, 2025 13:22

reorganize new examples

15ac21b

combine example for new props

49c86ce

drop redundant example

4bd00f3

rework main example

b940a03

remove non-english comment

9780a9b

Copy link

Contributor

J-Sek commentedNov 24, 2025

It is coming up nicely.

would it make sense to collapse only items that exceed the limit? Similar to VPagination. User could have more control and even set the value to1 and have only the last item visible. I know you attempt to follow MUI, but I can almost foresee we get a feature request for this kind of enhancement in a few months.
API should probably expose a simple method to collapse expanded items (both inline and menu) programatically
it would be great to include some ARIA attributes and support screenreaders from day one, if possible

Copy link

Author

jdflaugergues commentedNov 24, 2025

It is coming up nicely.
would it make sense to collapse only items that exceed the limit? Similar to VPagination. User could have more control and even set the value to1 and have only the last item visible. I know you attempt to follow MUI, but I can almost foresee we get a feature request for this kind of enhancement in a few months.
API should probably expose a simple method to collapse expanded items (both inline and menu) programatically
it would be great to include some ARIA attributes and support screenreaders from day one, if possible

@J-Sek

What would be the rule for choosing which breadcrumb items to collapse?
- The first items? (e.g., for totalVisible = 3 andLink1/Link2/Link3/Link4/Link5/Link6 →…/Link4/Link5/Link6)
- The first items starting from the second one? (e.g., for totalVisible = 3 andLink1/Link2/Link3/Link4/Link5/Link6 →Link1/…/Link5/Link6)
- The last items? (e.g., for totalVisible = 3 andLink1/Link2/Link3/Link4/Link5/Link6 →Link1/Link2/…/Link6)
Which ARIA attributes would you like to add to the component? We already havearia-label="breadcrumbs" on the<nav>,aria-current="page" on the active item, andaria-hidden on the dividers. Maybe add anaria-label on each breadcrumb item?

Copy link

Contributor

J-Sek commentedNov 24, 2025

What would be the rule for choosing which breadcrumb items to collapse?

Good question. We could have:collapse-from="{index}" to support all of the scenarios.

Which ARIA attributes would you like to add to the component?

Just something to support the new "ellipsis". I did not check it.. if it already says something reasonable upon keyboard focus, then we should be fine, otherwise I hope it only needs onearia-label.