diff --git a/package.json b/package.json
index 36ef31b01..43e72f578 100644
--- a/package.json
+++ b/package.json
@@ -153,5 +153,8 @@
   "engines": {
     "node": ">= 14.0.0",
     "npm": ">= 3.0.0"
+  },
+  "dependencies": {
+    "vue-observe-visibility": "^1.0.0"
   }
 }
diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js
index 6d4e78ea4..38d87fb89 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.spec.js
@@ -18,7 +18,7 @@ describe("OcBreadcrumb", () => {
     })
 
     expect(wrapper.props().variation).toMatch("lead")
-    expect(wrapper.classes()).toContain("oc-breadcrumb-lead")
+    expect(wrapper.html()).toContain("oc-breadcrumb oc-breadcrumb-lead")
     expect(wrapper).toMatchSnapshot()
   })
   it("displays all items", () => {
diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index bfaf840ee..329cc57b3 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,95 +1,96 @@
 <template>
-  <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
-    <ol class="oc-breadcrumb-list oc-mb-s">
-      <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
-        <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
-          <span>{{ item.text }}</span>
-        </router-link>
-        <oc-icon
-          v-if="item.to"
-          color="var(--oc-color-text-default)"
-          name="arrow-right-s"
-          fill-type="line"
-        />
-        <oc-button
-          v-else-if="item.onClick"
-          :aria-current="getAriaCurrent(index)"
-          appearance="raw"
-          @click="item.onClick"
-        >
-          <span>{{ item.text }}</span>
-        </oc-button>
-        <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
-        <template v-if="showContextMenu && index === items.length - 1">
+  <div class="oc-breadcrumb-wrapper" ref="wrapper">
+    <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
+      <ol class="oc-breadcrumb-list oc-mb-s" ref="breadcrumb">
+        <li v-for="(item, index) in visibleItems" :key="index" :data-key="index" :is-visible="addItemSize(index, item.to)" :id="`item-${index}`" class="oc-breadcrumb-list-item">
+          <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
+            <span>{{ item.text }}</span>
+          </router-link>
+          <oc-icon
+            v-if="item.to"
+            color="var(--oc-color-text-default)"
+            name="arrow-right-s"
+            fill-type="line"
+          />
           <oc-button
-            id="oc-breadcrumb-contextmenu-trigger"
-            v-oc-tooltip="contextMenuLabel"
-            :aria-label="contextMenuLabel"
+            v-else-if="item.onClick"
+            :aria-current="getAriaCurrent(index)"
             appearance="raw"
+            @click="item.onClick"
           >
-            <oc-icon name="more-2" color="var(--oc-color-text-default)" />
+            <span>{{ item.text }}</span>
           </oc-button>
-          <oc-drop
-            drop-id="oc-breadcrumb-contextmenu"
-            toggle="#oc-breadcrumb-contextmenu-trigger"
-            mode="click"
-            close-on-click
-            :padding-size="contextMenuPadding"
-            @click.native.stop.prevent
-          >
-            <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
-            <slot name="contextMenu" />
-          </oc-drop>
-        </template>
-      </li>
-    </ol>
-    <div class="oc-breadcrumb-drop">
-      <label
-        ref="mobileDropdown"
-        tabindex="0"
-        class="oc-breadcrumb-drop-label"
-        @keydown.enter="$refs.mobileDropdown.click()"
-      >
-        <span
-          v-if="currentFolder"
-          class="oc-breadcrumb-drop-label-text"
-          aria-current="page"
-          v-text="currentFolder.text"
-        />
-        <oc-icon
-          class="oc-breadcrumb-drop-label-icon"
-          name="arrow-down-s"
-          :accessible-label="$gettext('Expand more')"
-        />
-      </label>
-      <oc-drop v-if="dropdownItems">
-        <ol>
-          <li v-for="(item, index) in dropdownItems" :key="index">
-            <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
-              {{ item.text }}
-            </router-link>
+          <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
+          <template v-if="showContextMenu && index === items.length - 1">
             <oc-button
-              v-else-if="item.onClick"
-              justify-content="left"
+              id="oc-breadcrumb-contextmenu-trigger"
+              v-oc-tooltip="contextMenuLabel"
+              :aria-label="contextMenuLabel"
               appearance="raw"
-              :aria-current="getAriaCurrent(index)"
-              @click="item.onClick"
             >
-              {{ item.text }}
+              <oc-icon name="more-2" color="var(--oc-color-text-default)" />
             </oc-button>
-            <span v-else :aria-current="getAriaCurrent(index)" v-text="item.text" />
-          </li>
-        </ol>
-      </oc-drop>
-    </div>
-  </nav>
+            <oc-drop
+              drop-id="oc-breadcrumb-contextmenu"
+              toggle="#oc-breadcrumb-contextmenu-trigger"
+              mode="click"
+              close-on-click
+              :padding-size="contextMenuPadding"
+              @click.native.stop.prevent
+            >
+              <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
+              <slot name="contextMenu" />
+            </oc-drop>
+          </template>
+        </li>
+      </ol>
+      <div class="oc-breadcrumb-drop">
+        <label
+          ref="mobileDropdown"
+          tabindex="0"
+          class="oc-breadcrumb-drop-label"
+          @keydown.enter="$refs.mobileDropdown.click()"
+        >
+          <span
+            v-if="currentFolder"
+            class="oc-breadcrumb-drop-label-text"
+            aria-current="page"
+            v-text="currentFolder.text"
+          />
+          <oc-icon
+            class="oc-breadcrumb-drop-label-icon"
+            name="arrow-down-s"
+            :accessible-label="$gettext('Expand more')"
+          />
+        </label>
+        <oc-drop v-if="dropdownItems">
+          <ol>
+            <li v-for="(item, index) in dropdownItems" :key="index">
+              <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
+                {{ item.text }}
+              </router-link>
+              <oc-button
+                v-else-if="item.onClick"
+                justify-content="left"
+                appearance="raw"
+                :aria-current="getAriaCurrent(index)"
+                @click="item.onClick"
+              >
+                {{ item.text }}
+              </oc-button>
+              <span v-else :aria-current="getAriaCurrent(index)" v-text="item.text" />
+            </li>
+          </ol>
+        </oc-drop>
+      </div>
+    </nav>
+  </div>
 </template>
 
 <script>
 import OcButton from "../../atoms/OcButton/OcButton.vue"
 import OcDrop from "../../atoms/OcDrop/OcDrop.vue"
 import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
-
 /**
  * Displays a breadcrumb. Each item in the items property has the following elements:
  *
@@ -101,6 +102,13 @@ export default {
   status: "ready",
   release: "1.0.0",
 
+  data: () => {
+    return {
+      visibleItems: [],
+      invisibleItems: [],
+      itemWidth: {}
+    }
+  },
   components: {
     OcDrop,
     OcIcon,
@@ -157,10 +165,83 @@ export default {
       return !!this.$slots.contextMenu
     },
   },
+
+
+  watch: {
+    items: {
+      handler: function (to, from) {
+        this.visibleItems = to
+      }
+    }
+  },
+
+  mounted() {
+    this.visibleItems = this.items
+    const resizeObserver = new ResizeObserver(() => {
+      let outerWidth = this.$refs.wrapper.clientWidth
+      let breadcrumbWidth = this.$refs.breadcrumb.clientWidth
+      console.log("===== =====")
+      console.log(`outerWidth: ${outerWidth}, innerWidth: ${breadcrumbWidth}`)
+      // Remove items if less space is available
+      let { items, total } = Array.from(this.$refs.breadcrumb.childNodes).reverse().reduce((acc, item) => {
+        const itemKey = item.getAttribute("data-key")
+        const metaItem = this.visibleItems[itemKey]
+        metaItem.clientWidth = item.clientWidth
+        if((acc.total + item.clientWidth) > outerWidth) {
+          return acc
+        }
+        acc.items.push(metaItem)
+        acc.total += item.clientWidth
+        breadcrumbWidth += item.clientWidth
+        //var index = this.items.findIndex(e => e.to === metaItem.to)
+        //acc.invisibleItems = acc.invisibleItems.splice(index, 1)
+        return acc
+      }, {total: 0, items: []})
+      
+      // Add items if more space is available
+      items = items.reverse()
+      const metaItem = items[0]
+      const currentItem = this.items.findIndex(e => e.to === metaItem.to)
+      if(currentItem > 0) {
+        const nextVisible = this.items[currentItem - 1]
+        if(nextVisible && nextVisible.to) {
+          const clientWidth = this.itemWidth[nextVisible.to]
+          if((breadcrumbWidth + clientWidth) < outerWidth) {
+            console.log(`current: ${metaItem.to}, next ${nextVisible.to}`)
+            console.log(`${total} + ${clientWidth} < ${outerWidth}`)
+            items = [nextVisible, ...items]
+          }
+        }
+      }
+      this.visibleItems = items
+      /* THIS IS FOR DEBUG */
+      /*var invisibleTexts = []
+      for(var item of this.invisibleItems) {
+        invisibleTexts.push(item.text)
+      }
+      console.log("Currently invisible items:", invisibleTexts, total)
+      console.log("test", this.visibleItems)*/
+    })
+    
+    resizeObserver.observe(this.$refs.breadcrumb)
+    resizeObserver.observe(this.$refs.wrapper)
+    this.$on('beforeDestroy', () => {
+      resizeObserver.disconnect()
+    });
+  },
   methods: {
     getAriaCurrent(index) {
       return this.items.length - 1 === index ? "page" : null
     },
+    isItemVisible(item) {
+      return this.visibleItems.find(e => e.to === item.to)
+    },
+    addItemSize(index, to) {
+      this.$nextTick(() => {
+        this.itemWidth[to] = document.getElementById(`item-${index}`).clientWidth
+      })
+      return true
+    }
   },
 }
 </script>
@@ -168,6 +249,17 @@ export default {
 <style lang="scss">
 .oc-breadcrumb {
   overflow: hidden;
+  flex-shrink: 0;
+  width: auto;
+  position: absolute;
+  white-space: nowrap;
+
+  &-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+  }
 
   &-list {
     @extend .oc-visible\@s;
@@ -220,6 +312,7 @@ export default {
 
   /* stylelint-disable */
   &-list-item {
+    display: inline-block;
     a,
     button,
     span {
diff --git a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
index 54b70d1db..2dc8bc3b2 100644
--- a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
+++ b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
@@ -1,99 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OcBreadcrumb displays all items 1`] = `
-<nav class="oc-breadcrumb oc-breadcrumb-default">
-  <ol class="oc-breadcrumb-list oc-mb-s">
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!---->
-      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
-      <!---->
-    </li>
-  </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
-      <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
-    </label>
-    <oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
-      <ol>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            Deep
-          </router-link-stub>
-        </li>
-        <li>
-          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-            Subfolder
-          </oc-button-stub>
-        </li>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            First folder
-          </router-link-stub>
-        </li>
-      </ol>
-    </oc-drop-stub>
-  </div>
-</nav>
+<div class="oc-breadcrumb-wrapper">
+  <nav class="oc-breadcrumb oc-breadcrumb-default">
+    <ol id="test" class="oc-breadcrumb-list oc-mb-s">
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!---->
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+        <!---->
+      </li>
+    </ol>
+    <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+        <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
+      </label>
+      <oc-drop-stub dropid="oc-drop-2" toggle="" position="bottom-start" mode="click" paddingsize="medium">
+        <ol>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              Deep
+            </router-link-stub>
+          </li>
+          <li>
+            <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+              Subfolder
+            </oc-button-stub>
+          </li>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              First folder
+            </router-link-stub>
+          </li>
+        </ol>
+      </oc-drop-stub>
+    </div>
+  </nav>
+</div>
 `;
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
-<nav class="oc-breadcrumb oc-breadcrumb-lead">
-  <ol class="oc-breadcrumb-list oc-mb-s">
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!---->
-      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
-      <!---->
-    </li>
-    <li class="oc-breadcrumb-list-item">
-      <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
-      <!---->
-    </li>
-  </ol>
-  <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
-      <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
-    </label>
-    <oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">
-      <ol>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            Deep
-          </router-link-stub>
-        </li>
-        <li>
-          <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-            Subfolder
-          </oc-button-stub>
-        </li>
-        <li>
-          <router-link-stub tag="a" to="[object Object]">
-            First folder
-          </router-link-stub>
-        </li>
-      </ol>
-    </oc-drop-stub>
-  </div>
-</nav>
+<div class="oc-breadcrumb-wrapper">
+  <nav class="oc-breadcrumb oc-breadcrumb-lead">
+    <ol id="test" class="oc-breadcrumb-list oc-mb-s">
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!---->
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
+        <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+        <!---->
+      </li>
+      <li class="oc-breadcrumb-list-item">
+        <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+        <!---->
+      </li>
+    </ol>
+    <div class="oc-breadcrumb-drop"><label tabindex="0" class="oc-breadcrumb-drop-label"><span aria-current="page" class="oc-breadcrumb-drop-label-text">Deeper ellipsize in responsive mode</span>
+        <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="Expand more" type="span" size="medium" variation="passive" color="" class="oc-breadcrumb-drop-label-icon"></oc-icon-stub>
+      </label>
+      <oc-drop-stub dropid="oc-drop-1" toggle="" position="bottom-start" mode="click" paddingsize="medium">
+        <ol>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              Deep
+            </router-link-stub>
+          </li>
+          <li>
+            <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+              Subfolder
+            </oc-button-stub>
+          </li>
+          <li>
+            <router-link-stub tag="a" to="[object Object]">
+              First folder
+            </router-link-stub>
+          </li>
+        </ol>
+      </oc-drop-stub>
+    </div>
+  </nav>
+</div>
 `;
diff --git a/src/system.js b/src/system.js
index c52fcd482..c2297f345 100644
--- a/src/system.js
+++ b/src/system.js
@@ -4,7 +4,8 @@
  *
  * You should & can add your own dependencies here if needed.
  */
-
+import Vue from 'vue'
+import { ObserveVisibility } from 'vue-observe-visibility'
 import "./styles/styles.scss"
 import { getSizeClass } from "./utils/sizeClasses.js"
 
@@ -46,6 +47,8 @@ const System = {
 
     Object.keys(components).forEach(name => Vue.component(name, components[name]))
     Object.keys(directives).forEach(name => Vue.directive(name, directives[name]))
+
+    Vue.directive('observe-visibility', ObserveVisibility)
   },
 }
 
diff --git a/yarn.lock b/yarn.lock
index 823f5f903..82a362138 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13153,6 +13153,11 @@ vue-loader@^15.9.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-select@^3.12.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"