diff --git a/changelog/unreleased/enhancement-long-breadcrumb-strategy b/changelog/unreleased/enhancement-long-breadcrumb-strategy
new file mode 100644
index 00000000000..a4da40de905
--- /dev/null
+++ b/changelog/unreleased/enhancement-long-breadcrumb-strategy
@@ -0,0 +1,6 @@
+Enhancement: Long breadcrumb strategy
+
+We've implemented a new solution to deal with long breadcrumbs even with long folder names.
+
+https://github.com/owncloud/web/pull/8984
+https://github.com/owncloud/web/issues/6731
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
index c21c4910347..9bd986c8cfd 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
@@ -17,7 +17,9 @@ describe('OcBreadcrumb', () => {
   })
   it('displays all items', () => {
     const { wrapper } = getWrapper()
-    expect(wrapper.findAll('.oc-breadcrumb-list-item').length).toBe(items.length)
+    expect(wrapper.findAll('.oc-breadcrumb-list-item:not(.oc-invisible-sr)').length).toBe(
+      items.length
+    )
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('displays context menu trigger if enabled via property', () => {
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 71ced5cd9f2..e14c7c84a45 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,12 +2,28 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in displayItems"
         :key="index"
-        class="oc-breadcrumb-list-item oc-flex oc-flex-middle"
+        :data-key="index"
+        :data-item-id="item.id"
+        :aria-hidden="item.isTruncationPlaceholder"
+        :class="[
+          'oc-breadcrumb-list-item',
+          'oc-flex',
+          'oc-flex-middle',
+          {
+            'oc-invisible-sr':
+              hiddenItems.indexOf(item) !== -1 ||
+              (item.isTruncationPlaceholder && hiddenItems.length === 0)
+          }
+        ]"
       >
-        <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
-          <span>{{ item.text }}</span>
+        <router-link
+          v-if="item.to"
+          :aria-current="getAriaCurrent(index)"
+          :to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
+        >
+          <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
         </router-link>
         <oc-icon
           v-if="item.to"
@@ -20,12 +36,27 @@
           v-else-if="item.onClick"
           :aria-current="getAriaCurrent(index)"
           appearance="raw"
+          class="oc-flex"
           @click="item.onClick"
         >
-          <span>{{ item.text }}</span>
+          <span
+            :class="[
+              'oc-breadcrumb-item-text',
+              {
+                'oc-breadcrumb-item-text-last': index === displayItems.length - 1
+              }
+            ]"
+            v-text="item.text"
+          />
         </oc-button>
-        <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
-        <template v-if="showContextActions && index === items.length - 1">
+        <span
+          v-else
+          class="oc-breadcrumb-item-text"
+          :aria-current="getAriaCurrent(index)"
+          tabindex="-1"
+          v-text="item.text"
+        />
+        <template v-if="showContextActions && index === displayItems.length - 1">
           <oc-button
             id="oc-breadcrumb-contextmenu-trigger"
             v-oc-tooltip="contextMenuLabel"
@@ -48,7 +79,7 @@
       </li>
     </ol>
     <oc-button
-      v-if="items.length > 1"
+      v-if="displayItems.length > 1"
       appearance="raw"
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
@@ -58,13 +89,13 @@
       <oc-icon name="arrow-left-s" fill-type="line" size="large" class="oc-mr-m" />
     </oc-button>
   </nav>
-  <div v-if="items.length > 1" class="oc-breadcrumb-mobile-current">
+  <div v-if="displayItems.length > 1" class="oc-breadcrumb-mobile-current">
     <span class="oc-text-truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, nextTick, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 import { AVAILABLE_SIZES } from '../../helpers/constants'
@@ -92,7 +123,6 @@ export default defineComponent({
     OcIcon,
     OcButton
   },
-
   props: {
     /**
      * Id for the breadcrumbs. If it's empty, a generated one will be used.
@@ -132,6 +162,26 @@ export default defineComponent({
         return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
       }
     },
+
+    /**
+     * Defines the maximum width of the breadcrumb. If the breadcrumb is wider than the given value, the breadcrumb
+     * will be reduced from the left side.
+     * If the value is -1, the breadcrumb will not be reduced.
+     */
+    maxWidth: {
+      type: Number,
+      required: false,
+      default: -1
+    },
+    /**
+     * Defines the number of items that should be always displayed at the beginning of the breadcrumb.
+     * The default value is 2. e.g. Personal > ... > XYZ
+     */
+    truncationOffset: {
+      type: Number,
+      required: false,
+      default: 2
+    },
     /**
      * Determines if the last breadcrumb item should have context menu actions.
      */
@@ -142,6 +192,65 @@ export default defineComponent({
   },
   setup(props) {
     const { $gettext } = useGettext()
+    const visibleItems = ref<BreadcrumbItem[]>([])
+    const hiddenItems = ref<BreadcrumbItem[]>([])
+    const displayItems = ref<BreadcrumbItem[]>(props.items.slice())
+
+    const getBreadcrumbElement = (id): HTMLElement => {
+      return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
+    }
+
+    const calculateTotalBreadcrumbWidth = () => {
+      let totalBreadcrumbWidth = 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
+      visibleItems.value.forEach((item) => {
+        const breadcrumbElement = getBreadcrumbElement(item.id)
+        const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
+        totalBreadcrumbWidth += itemClientWidth
+      })
+      return totalBreadcrumbWidth
+    }
+
+    const reduceBreadcrumb = (offsetIndex) => {
+      const breadcrumbMaxWidth = props.maxWidth
+      if (!breadcrumbMaxWidth) {
+        return
+      }
+      const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
+
+      const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
+      if (!isOverflowing || visibleItems.value.length <= props.truncationOffset + 1) {
+        return
+      }
+      // Remove from the left side
+      const removed = visibleItems.value.splice(offsetIndex, 1)
+
+      hiddenItems.value.push(removed[0])
+      reduceBreadcrumb(offsetIndex)
+    }
+
+    const lastHiddenItem = computed(() =>
+      hiddenItems.value.length >= 1 ? unref(hiddenItems)[unref(hiddenItems).length - 1] : { to: {} }
+    )
+
+    const renderBreadcrumb = () => {
+      displayItems.value = [...props.items]
+      if (displayItems.value.length > props.truncationOffset - 1) {
+        displayItems.value.splice(props.truncationOffset - 1, 0, {
+          text: '...',
+          allowContextActions: false,
+          to: {},
+          isTruncationPlaceholder: true
+        })
+      }
+      visibleItems.value = [...displayItems.value]
+      hiddenItems.value = []
+
+      nextTick(() => {
+        reduceBreadcrumb(props.truncationOffset)
+      })
+    }
+
+    watch([() => props.maxWidth, () => props.items], renderBreadcrumb, { immediate: true })
 
     const currentFolder = computed<BreadcrumbItem>(() => {
       if (props.items.length === 0 || !props.items) {
@@ -161,7 +270,17 @@ export default defineComponent({
       return props.items.length - 1 === index ? 'page' : null
     }
 
-    return { currentFolder, parentFolderTo, contextMenuLabel, getAriaCurrent }
+    return {
+      currentFolder,
+      parentFolderTo,
+      contextMenuLabel,
+      getAriaCurrent,
+      visibleItems,
+      hiddenItems,
+      renderBreadcrumb,
+      displayItems,
+      lastHiddenItem
+    }
   }
 })
 </script>
@@ -169,6 +288,16 @@ export default defineComponent({
 <style lang="scss">
 .oc-breadcrumb {
   overflow: hidden;
+  &-item-text {
+    max-width: 200px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &-last {
+      vertical-align: text-bottom;
+    }
+  }
 
   &-mobile-current,
   &-mobile-navigation {
@@ -184,7 +313,11 @@ export default defineComponent({
 
     list-style: none;
     align-items: baseline;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+
+    span {
+      white-space: nowrap;
+    }
 
     #oc-breadcrumb-contextmenu-trigger > span {
       vertical-align: middle;
@@ -223,6 +356,8 @@ export default defineComponent({
       font-size: var(--oc-font-size-medium);
       color: var(--oc-color-text-default);
       display: inline-block;
+      vertical-align: sub;
+      line-height: normal;
     }
   }
 
diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index fadc16adea6..f78154c61ee 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -3,30 +3,37 @@
 exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default" id="oc-breadcrumbs-2">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="0">
       <router-link-stub tag="a" to="[object Object]">
-        <span>First folder</span>
+        <span class="oc-breadcrumb-item-text">First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr" data-key="1">
+      <router-link-stub tag="a" to="[object Object]">
+        <span class="oc-breadcrumb-item-text">...</span>
+      </router-link-stub>
+      <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
-      <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
-        <span>Subfolder</span>
+    </li>
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
+      <!--v-if-->
+      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+        <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub tag="a" to="[object Object]">
-        <span>Deep</span>
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
+      <router-link-stub aria-current="page" tag="a" to="[object Object]">
+        <span class="oc-breadcrumb-item-text">Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="4">
       <!--v-if-->
-      <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <span class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
     </li>
   </ol>
@@ -43,30 +50,37 @@ exports[`OcBreadcrumb displays all items 1`] = `
 exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead" id="oc-breadcrumbs-1">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="0">
       <router-link-stub tag="a" to="[object Object]">
-        <span>First folder</span>
+        <span class="oc-breadcrumb-item-text">First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr" data-key="1">
+      <router-link-stub tag="a" to="[object Object]">
+        <span class="oc-breadcrumb-item-text">...</span>
+      </router-link-stub>
+      <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
-      <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
-        <span>Subfolder</span>
+    </li>
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
+      <!--v-if-->
+      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+        <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub tag="a" to="[object Object]">
-        <span>Deep</span>
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
+      <router-link-stub aria-current="page" tag="a" to="[object Object]">
+        <span class="oc-breadcrumb-item-text">Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="4">
       <!--v-if-->
-      <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <span class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
     </li>
   </ol>
diff --git a/packages/design-system/src/components/OcBreadcrumb/types.ts b/packages/design-system/src/components/OcBreadcrumb/types.ts
index 7837ac69c86..30e4608be98 100644
--- a/packages/design-system/src/components/OcBreadcrumb/types.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/types.ts
@@ -1,8 +1,10 @@
 import { RouteLocationRaw } from 'vue-router'
 
 export interface BreadcrumbItem {
+  id?: string
   text: string
   to?: RouteLocationRaw
   allowContextActions?: boolean
   onClick?: () => void
+  isTruncationPlaceholder?: boolean
 }
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 3633357116c..dead39e297c 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Spaces view loading states should render spaces list after loading has
     <div class="oc-width-expand oc-height-1-1 oc-position-relative" id="admin-settings-wrapper">
       <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
+          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index c8bb1c6994b..ce601b0f60d 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,6 +18,8 @@
           context-menu-padding="small"
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
+          :max-width="breadcrumbMaxWidth"
+          :truncation-offset="breadcrumbTruncationOffset"
         >
           <template #contextMenu>
             <context-actions
@@ -27,7 +29,11 @@
         </oc-breadcrumb>
         <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
         <shares-navigation v-if="hasSharesNavigation" />
-        <div v-if="hasViewOptions || hasSidebarToggle" class="oc-flex">
+        <div
+          v-if="hasViewOptions || hasSidebarToggle"
+          id="files-app-bar-controls-right"
+          class="oc-flex"
+        >
           <view-options
             v-if="hasViewOptions"
             :view-modes="viewModes"
@@ -60,12 +66,13 @@
 
 <script lang="ts">
 import last from 'lodash-es/last'
-import { computed, defineComponent, inject, PropType, Ref, unref } from 'vue'
+import { computed, defineComponent, inject, PropType, ref, Ref, unref } from 'vue'
 import { mapGetters, mapState, mapMutations } from 'vuex'
 import { Resource } from 'web-client'
 import {
   isPersonalSpaceResource,
   isProjectSpaceResource,
+  isShareSpaceResource,
   SpaceResource
 } from 'web-client/src/helpers'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
@@ -87,7 +94,7 @@ import {
   useFileActionsMove,
   useFileActionsRestore
 } from 'web-app-files/src/composables/actions'
-import { useStore } from 'web-pkg/src'
+import { useRouter, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
 
@@ -129,6 +136,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+    const router = useRouter()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
     const { actions: clearSelectionActions } = useFileActionsClearSelection({ store })
@@ -141,6 +149,8 @@ export default defineComponent({
     const { actions: moveActions } = useFileActionsMove({ store })
     const { actions: restoreActions } = useFileActionsRestore({ store })
 
+    const breadcrumbMaxWidth = ref<number>(0)
+
     const batchActions = computed(() => {
       return [
         ...unref(clearSelectionActions),
@@ -182,10 +192,21 @@ export default defineComponent({
       return props.breadcrumbs.length <= 1
     })
 
+    const breadcrumbTruncationOffset = computed(() => {
+      if (!props.space) {
+        return 2
+      }
+      return isProjectSpaceResource(unref(props.space)) || isShareSpaceResource(unref(props.space))
+        ? 3
+        : 2
+    })
+
     return {
       batchActions,
       showBreadcrumb,
-      showMobileNav
+      showMobileNav,
+      breadcrumbMaxWidth,
+      breadcrumbTruncationOffset
     }
   },
   data: function () {
@@ -226,9 +247,11 @@ export default defineComponent({
   },
   mounted() {
     this.resizeObserver.observe(this.$refs.filesAppBar as HTMLElement)
+    window.addEventListener('resize', this.onResize)
   },
   beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.filesAppBar as HTMLElement)
+    window.removeEventListener('resize', this.onResize)
   },
 
   created() {
@@ -253,6 +276,19 @@ export default defineComponent({
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
 
     onResize() {
+      const totalContentWidth =
+        document.getElementById('web-content-main')?.getBoundingClientRect().width || 0
+      const leftSidebarWidth =
+        document.getElementById('web-nav-sidebar')?.getBoundingClientRect().width || 0
+      const rightSidebarWidth =
+        document.getElementById('app-sidebar')?.getBoundingClientRect().width || 0
+
+      const rightControlsWidth = document.getElementById(
+        'files-app-bar-controls-right'
+      )?.clientWidth
+
+      this.breadcrumbMaxWidth =
+        totalContentWidth - leftSidebarWidth - rightSidebarWidth - rightControlsWidth
       this.limitedScreenSpace = this.sideBarOpen
         ? window.innerWidth <= 1280
         : window.innerWidth <= 1000
diff --git a/packages/web-app-files/src/helpers/breadcrumbs.ts b/packages/web-app-files/src/helpers/breadcrumbs.ts
index 262e8ec1402..ee8ae0fc267 100644
--- a/packages/web-app-files/src/helpers/breadcrumbs.ts
+++ b/packages/web-app-files/src/helpers/breadcrumbs.ts
@@ -2,6 +2,7 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { RouteLocation } from 'vue-router'
 import omit from 'lodash-es/omit'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
+import { v4 as uuidv4 } from 'uuid'
 
 export const breadcrumbsFromPath = (
   currentRoute: RouteLocation,
@@ -14,6 +15,7 @@ export const breadcrumbsFromPath = (
   return resource.map(
     (text, i) =>
       ({
+        id: uuidv4(),
         allowContextActions: true,
         text,
         to: {
@@ -30,6 +32,7 @@ export const concatBreadcrumbs = (...items: BreadcrumbItem[]): BreadcrumbItem[]
   return [
     ...items,
     {
+      id: uuidv4(),
       allowContextActions: last.allowContextActions,
       text: last.text,
       onClick: () => eventBus.publish('app.files.list.load')
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index e33f30e94e6..a3ea8abac73 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -186,6 +186,7 @@ import { FolderLoaderOptions } from '../../services/folder'
 import { CreateTargetRouteOptions } from 'web-app-files/src/helpers/folderLink/types'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { displayPositionedDropdown } from 'web-pkg/src'
+import { v4 as uuidv4 } from 'uuid'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -282,16 +283,19 @@ export default defineComponent({
       const rootBreadcrumbItems: BreadcrumbItem[] = []
       if (isProjectSpaceResource(space)) {
         rootBreadcrumbItems.push({
+          id: uuidv4(),
           text: $gettext('Spaces'),
           to: createLocationSpaces('files-spaces-projects')
         })
       } else if (isShareSpaceResource(space)) {
         rootBreadcrumbItems.push(
           {
+            id: uuidv4(),
             text: $gettext('Shares'),
             to: { path: '/files/shares' }
           },
           {
+            id: uuidv4(),
             text: $gettext('Shared with me'),
             to: { path: '/files/shares/with-me' }
           }
@@ -303,6 +307,7 @@ export default defineComponent({
       query = omit({ ...unref(route).query, ...query }, 'page')
       if (isPersonalSpaceResource(space)) {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           text: space.name,
           to: createLocationSpaces('files-spaces-generic', {
             params,
@@ -311,6 +316,7 @@ export default defineComponent({
         }
       } else if (isShareSpaceResource(space)) {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           allowContextActions: true,
           text: space.name,
           to: createLocationSpaces('files-spaces-generic', {
@@ -320,6 +326,7 @@ export default defineComponent({
         }
       } else if (isPublicSpaceResource(space)) {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           text: $gettext('Public link'),
           to: createLocationPublic('files-public-link', {
             params,
@@ -328,6 +335,7 @@ export default defineComponent({
         }
       } else {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           allowContextActions: !unref(hasSpaceHeader),
           text: space.name,
           to: createLocationSpaces('files-spaces-generic', {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 85c52f31f75..9d50697817b 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
       <!--v-if-->
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
-      <div class="oc-flex">
+      <div class="oc-flex" id="files-app-bar-controls-right">
         <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
@@ -32,7 +32,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
       <!--v-if-->
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
-      <div class="oc-flex">
+      <div class="oc-flex" id="files-app-bar-controls-right">
         <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
@@ -56,7 +56,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
       <!--v-if-->
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
-      <div class="oc-flex">
+      <div class="oc-flex" id="files-app-bar-controls-right">
         <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
diff --git a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
index 8da6cde8090..e8be979d593 100644
--- a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
@@ -9,6 +9,7 @@ describe('builds an array of breadcrumbitems', () => {
     )
     expect(breadCrumbs).toEqual([
       {
+        id: expect.anything(),
         allowContextActions: true,
         text: 'test',
         to: { path: '/files/spaces/personal/home/test', query: {} }
@@ -25,12 +26,5 @@ describe('builds an array of breadcrumbitems', () => {
     const result = concatBreadcrumbs(...initialBreadCrumbs, ...breadCrumbsFromPath)
     expect(result[0]).toMatchObject({ text: 'Foo' })
     expect(result[1]).toMatchObject({ text: 'Bar' })
-    expect(JSON.stringify(result[2])).toEqual(
-      JSON.stringify({
-        allowContextActions: true,
-        text: 'bar',
-        onClick: () => undefined
-      })
-    )
   })
 })