diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 36cfc58f45f84..db944b4a77294 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -16,19 +16,23 @@
v-bind="section"
dir="auto"
:to="section.to"
+ :class="{ 'is-current': section.isCurrent }"
:force-icon-text="index === 0 && fileListWidth >= 486"
:title="titleForSection(index, section)"
:aria-description="ariaForSection(section)"
- @click.native="onClick(section.to)"
+ :aria-current="section.isCurrent ? 'page' : null"
+ :tabindex="section.isCurrent ? -1 : 0"
+ @click.native="onClickIfNotCurrent(section.to, index)"
@dragover.native="onDragOver($event, section.dir)"
@drop="onDrop($event, section.dir)">
+ :size="20"
+ :svg="viewIcon" />
+
@@ -110,13 +114,15 @@ export default defineComponent({
return this.dirs.map((dir: string, index: number) => {
const source = this.getFileSourceFromPath(dir)
const node: Node | undefined = source ? this.getNodeFromSource(source) : undefined
+ const isCurrent = index === this.dirs.length - 1
return {
- dir,
- exact: true,
- name: this.getDirDisplayName(dir),
- to: this.getTo(dir, node),
- // disable drop on current directory
- disableDrop: index === this.dirs.length - 1,
+ dir,
+ exact: true,
+ name: this.getDirDisplayName(dir),
+ to: isCurrent ? undefined : this.getTo(dir, node),
+ // disable drop on current directory
+ disableDrop: isCurrent,
+ isCurrent,
}
})
},
@@ -147,6 +153,14 @@ export default defineComponent({
},
methods: {
+
+ // Guarded click helper — prevents navigation/click for the current (last) breadcrumb
+ onClickIfNotCurrent(to, index) {
+ // if sections isn't defined for some reason, fallback to not navigating
+ if (!this.sections || index === this.sections.length - 1) return
+ this.onClick(to)
+ },
+
getNodeFromSource(source: FileSource): Node | undefined {
return this.filesStore.getNode(source)
},
@@ -270,6 +284,9 @@ export default defineComponent({
},
titleForSection(index, section) {
+ if (section.isCurrent) {
+ return t('files', 'Current directory')
+ }
if (section?.to?.query?.dir === this.$route.query.dir) {
return t('files', 'Reload current directory')
} else if (index === 0) {
@@ -304,8 +321,19 @@ export default defineComponent({
a {
cursor: pointer !important;
}
+
+ /* When the breadcrumb item is the current one, make it non-interactive & not look like a link */
+ .is-current {
+ cursor: default !important;
+ }
+ .is-current a {
+ pointer-events: none !important;
+ text-decoration: none !important;
+ cursor: default !important;
+ }
}
+
&--with-progress {
flex-direction: column !important;
align-items: flex-start !important;