diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 58c1466f4..351e3e3dc 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -1,381 +1,97 @@
 <template>
 
-  <div
-    v-show="showSingleItem || crumbs.length > 1"
-    :class="{ 'breadcrumbs-collapsed': collapsedCrumbs.length }"
+  <KListWithOverflow
+    overflowDirection="start"
+    :items="preparedCrumbs"
   >
-    <nav class="breadcrumbs" v-bind="$attrs" :aria-label="$attrs.ariaLabel">
-      <div
-        v-show="collapsedCrumbs.length"
-        class="breadcrumbs-dropdown-wrapper"
-      >
-        <KIconButton
-          size="small"
-          :icon="showDropdown ? 'chevronUp' : 'chevronDown'"
-          appearance="raised-button"
-          @click="showDropdown = !showDropdown"
-        />
-        <div
-          v-if="showDropdown"
-          class="breadcrumbs-dropdown"
-          :style="{ background: $themeTokens.surface }"
+    <!-- Render individual breadcrumb items -->
+    <template #item="{ item }">
+      <li>
+        <KRouterLink
+          v-if="item.link"
+          :text="item.text"
+          :to="item.link"
         >
-          <ol class="breadcrumbs-dropdown-items">
-            <li
-              v-for="(crumb, index) in collapsedCrumbs"
-              :key="index"
-              class="breadcrumbs-dropdown-item"
-            >
-              <KRouterLink
-                v-if="crumb.link"
-                class="krouter-item"
-                :text="crumb.text"
-                :to="crumb.link"
-              >
-                <template #text="{ text }">
-                  <span class="breadcrumbs-crumb-text" dir="auto">{{ text }}</span>
-                </template>
-              </KRouterLink>
-              <span v-else dir="auto">{{ crumb.text }}</span>
-            </li>
-          </ol>
-        </div>
-      </div>
-
-      <ol class="breadcrumbs-visible-items">
-        <template v-for="(crumb, index) in crumbs">
-          <li
-            v-if="index !== crumbs.length - 1"
-            v-show="!crumb.collapsed"
-            :key="index"
-            class="breadcrumbs-visible-item breadcrumbs-visible-item-notlast"
-          >
-            <KRouterLink
-              v-if="crumb.link"
-              :text="crumb.text"
-              :to="crumb.link"
-              dir="auto"
-            >
-              <template #text="{ text }">
-                <span class="breadcrumbs-crumb-text">{{ text }}</span>
-              </template>
-            </KRouterLink>
-            <span v-else>{{ crumb.text }}</span>
-          </li>
-
-          <li
-            v-else
-            :key="index"
-            class="breadcrumb-visible-item-last breadcrumbs-visible-item"
-          >
-            <span
-              class="breadcrumbs-crumb-text"
-              :style="{ maxWidth: lastBreadcrumbMaxWidth }"
-              dir="auto"
-            >
-              {{ crumb.text }}
-            </span>
-          </li>
-        </template>
-      </ol>
-    </nav>
 
-
-    <!-- This is a duplicate of breacrumbs-visible-items to help to reference sizes. -->
-    <div class="breadcrumbs breadcrumbs-offscreen" aria-hidden="true">
-      <ol class="breadcrumbs-visible-items">
-        <template v-for="(crumb, index) in crumbs">
-          <li
-            v-if="index !== crumbs.length - 1"
-            :ref="`crumb${index}`"
-            :key="index"
-            class="breadcrumbs-visible-item breadcrumbs-visible-item-notlast"
-          >
-            <KRouterLink v-if="crumb.link" :text="crumb.text" :to="crumb.link" tabindex="-1">
-              <template #text="{ text }">
-                <span class="breadcrumbs-crumb-text">{{ text }}</span>
-              </template>
-            </KRouterLink>
-            <span v-else>{{ crumb.text }}</span>
-          </li>
-
-          <li
-            v-else
-            :ref="`crumb${index}`"
-            :key="index"
-            class="breadcrumb-visible-item-last breadcrumbs-visible-item"
-          >
-            <span
-              class="breadcrumbs-crumb-text"
-              :style="{ maxWidth: lastBreadcrumbMaxWidth }"  
-            >
-              {{ crumb.text }}
-            </span>
-          </li>
+          <template #text="{ text }">
+            <span class="breadcrumbs-crumb-text">{{ text }}</span>
+          </template>
+        </KRouterLink>
+        <span v-else>{{ item.text }}</span>
+      </li>
+    </template>
+
+    <!-- Render the separator between items -->
+    <template #divider>
+      <span class="breadcrumbs-divider">›</span>
+    </template>
+
+    <!-- Render the "more" overflow dropdown and its separator -->
+    <template #more="{ overflowItems }">
+      <KIconButton
+        size="small"
+        icon="chevronDown"
+        appearance="raised-button"
+      >
+        <template #menu>
+          <KDropdownMenu
+            :options="overflowItems
+              .filter(item => item.type !== 'separator') // Filter out separators
+              .map(item => ({
+                label: item.text, // Display 'text' in the menu
+                link: item.link ? item.link.path : null // Use 'path' for the actual hyperlink
+              }))"
+          />
         </template>
-      </ol>
-    </div>
-  </div>
+      </KIconButton>
+      <span class="breadcrumbs-divider">›</span>
+    </template>
+  </KListWithOverflow>
 
 </template>
 
-
 <script>
 
-  import filter from 'lodash/filter';
-  import startsWith from 'lodash/startsWith';
-  import throttle from 'lodash/throttle';
-  import every from 'lodash/every';
-  import keys from 'lodash/keys';
-  import useKResponsiveElement from './composables/useKResponsiveElement';
-
-  const DROPDOWN_BTN_WIDTH = 55;
-  const DEFAULT_LAST_BREADCRUMB_MAX_WIDTH = 300;
-
-  function validateLinkObject(object) {
-    const validKeys = ['name', 'path', 'params', 'query'];
-    return every(keys(object), key => validKeys.includes(key));
-  }
-
-  /**
-   * Used to aid deeply nested navigation of content channels, topics, and resources
-   */
   export default {
-    name: 'KBreadcrumbs',
-    inheritAttrs: false,
-    setup() {
-      const { elementWidth } = useKResponsiveElement();
-      return { elementWidth };
-    },
     props: {
-      /**
-       * An array of objects, each with a `text` attribute (String) and a
-       * `link` attribute (vue router link object). The `link` attribute
-       * of the last item in the array is optional and ignored. The `link`
-       * attribute can be set to `null` which will render the breadcrumb only
-       * as text, regardless of its position in the breadcrumb.
-       */
       items: {
         type: Array,
         required: true,
-        validator(crumbItems) {
-          // All must have text
-          if (!crumbItems.every(crumb => Boolean(crumb.text))) {
-            return false;
-          }
-          // If link is truthy make sure it is a valid router link
-          return crumbItems.every(crumb => !crumb.link || validateLinkObject(crumb.link));
-        },
       },
-      /**
-       * By default, the breadcrums will be hidden when the length of items is 1.
-       * When set to `true`, a breadcrumb will be shown even when there is only one.
-       */
       showSingleItem: {
         type: Boolean,
         default: false,
       },
     },
-
-    data: () => ({
-      // Array of crumb objects.
-      // Each object contains:
-      // text, router-link 'to' object, vue ref, and its collapsed state
-      crumbs: [],
-      showDropdown: false,
-      lastBreadcrumbMaxWidth: `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH}px`,
-    }),
     computed: {
-      collapsedCrumbs() {
-        return this.crumbs.filter(crumb => crumb.collapsed === true).reverse();
-      },
-      parentWidth() {
-        return this.elementWidth;
-      },
-    },
-    watch: {
-      items(val) {
-        this.crumbs = Array.from(val);
-        this.attachRefs();
-      },
-    },
-    created() {
-      this.crumbs = Array.from(this.items);
-    },
-    mounted() {
-      this.attachRefs();
-      // The throttled update function is defined here and not as a method on purpose
-      // since having it defined as a method on the options object would cause problems
-      // when there are more KBreadcrumbs instances rendered on one page.
-      // In such a scenario, all instances would share the same throttled function
-      // resulting in some instances not being updated when they should be.
-      // This is happening because of how the Vue component constructor and instances are built.
-      // Having it defined in the context of the `mounted` function ensures that each component
-      // instance will have its own throttled update function.
-      const throttledUpdateCrumbs = throttle(this.updateCrumbs, 100);
-      this.$watch('parentWidth', throttledUpdateCrumbs);
-    },
-    methods: {
-      attachRefs() {
-        this.$nextTick(() => {
-          const crumbRefs = filter(this.$refs, (value, key) => startsWith(key, 'crumb'));
-          this.crumbs = this.crumbs.map((crumb, index) => {
-            const updatedCrumb = crumb;
-            updatedCrumb.ref = crumbRefs[index];
-            return updatedCrumb;
-          });
-          this.updateCrumbs();
-        });
-      },
-      updateCrumbs() {
-        if (this.crumbs.length) {
-          // needs to be reset before another re-calculation
-          // otherwise calculactions below won't be precise
-          this.lastBreadcrumbMaxWidth = `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH}px`;
-
-          this.$nextTick(() => {
-            const tempCrumbs = Array.from(this.crumbs);
-            let lastCrumbWidth = Math.ceil(tempCrumbs.pop().ref[0].getBoundingClientRect().width);
-            let remainingWidth = this.parentWidth - DROPDOWN_BTN_WIDTH - lastCrumbWidth;
-            let trackingIndex = this.crumbs.length - 2;
-
-            while (tempCrumbs.length) {
-              if (remainingWidth <= 0) {
-                tempCrumbs.forEach((crumb, index) => {
-                  const updatedCrumb = crumb;
-                  updatedCrumb.collapsed = true;
-                  this.crumbs.splice(index, 1, updatedCrumb);
-                });
-                break;
-              }
-
-              lastCrumbWidth = Math.ceil(
-                tempCrumbs[tempCrumbs.length - 1].ref[0].getBoundingClientRect().width
-              );
-
-              if (lastCrumbWidth > remainingWidth) {
-                tempCrumbs.forEach((crumb, index) => {
-                  const updatedCrumb = crumb;
-                  updatedCrumb.collapsed = true;
-                  this.crumbs.splice(index, 1, updatedCrumb);
-                });
-                break;
-              }
-
-              remainingWidth -= lastCrumbWidth;
-              const lastCrumb = tempCrumbs.pop();
-              lastCrumb.collapsed = false;
-              this.crumbs.splice(trackingIndex, 1, lastCrumb);
-              trackingIndex -= 1;
-            }
-
-            // Allow the last breadcrumb use all space available
-            // Fixes https://github.com/learningequality/kolibri-design-system/issues/198
-            // and https://github.com/learningequality/kolibri/issues/6918
-            if (remainingWidth > 0) {
-              this.lastBreadcrumbMaxWidth = `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH +
-                remainingWidth}px`;
-            }
-          });
+      preparedCrumbs() {
+        const crumbs = [...this.items];
+        if (!this.showSingleItem && crumbs.length <= 1) {
+          return [];
         }
+        // Add separators between items
+        return crumbs.flatMap((item, index) =>
+          index > 0 ? [{ type: 'separator' }, item] : [item]
+        );
       },
     },
   };
 
 </script>
 
-
-<style lang="scss" scoped>
-
-  @import './styles/definitions';
-  $crumb-max-width: 300px;
-
-  .breadcrumbs {
-    height: 32px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    font-size: 16px;
-    font-weight: bold;
-    line-height: 32px;
-    white-space: nowrap;
+<style scoped>
+  .breadcrumbs-divider {
+    margin: 0 10px;
+    color: black; /* Adjust color for the ">" separator */
   }
 
   .breadcrumbs-crumb-text {
-    display: inline-block;
-    width: 100%;
-    max-width: $crumb-max-width;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: bottom;
-  }
-
-  .breadcrumbs-dropdown-wrapper {
-    display: inline-block;
-
-    &::after {
-      margin-right: 8px;
-      margin-left: 8px;
-      content: '›';
-    }
-  }
-
-  .breadcrumbs-dropdown {
-    @extend %dropshadow-2dp;
-
-    position: absolute;
-    z-index: 8;
-    max-width: 100%;
-    padding: 16px;
+    color: #007aff; /* Link color */
+    text-decoration: none;
     font-weight: bold;
   }
 
-  .breadcrumbs-dropdown-items {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  li {
+    display: inline;
   }
-
-  .breadcrumbs-dropdown-item {
-    display: block;
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    .krouter-item {
-      width: 100%;
-    }
-  }
-
-  .breadcrumbs-visible-items {
-    display: inline-block;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    list-style: none;
-
-    .breadcrumbs-collapsed & {
-      // account for dropdown button width
-      width: calc(100% - 55px);
-    }
-  }
-
-  .breadcrumbs-visible-item {
-    display: inline-block;
-    max-width: 100%;
-  }
-
-  .breadcrumbs-visible-item-notlast {
-    &::after {
-      margin-right: 8px;
-      margin-left: 8px;
-      content: '›';
-    }
-  }
-
-  .breadcrumbs-offscreen {
-    position: absolute;
-    left: -1000em;
-  }
-
 </style>
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index b16574dcf..19d6b5312 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -28,6 +28,7 @@
     <div
       ref="moreButtonWrapper"
       class="more-button-wrapper"
+      :class="{ 'start-button': overflowDirection === 'start' }"
     >
       <!-- @slot Slot responsible of rendering the "see more" button. This slot receives as prop a list `overflowItems` with items that dont fit into the visible list.-->
       <slot
@@ -70,6 +71,13 @@
         type: [Object, String],
         default: null,
       },
+      overflowDirection: {
+        type: String,
+        default: 'end',
+        validator(value) {
+          return ['start', 'end'].includes(value);
+        },
+      },
     },
     data() {
       return {
@@ -129,6 +137,8 @@
        */
       setOverflowItems() {
         const { list, listWrapper, moreButtonWrapper } = this.$refs;
+
+        // Exit early if necessary refs are not available
         if (!this.mounted || !listWrapper || !list) {
           this.overflowItems = [];
           return;
@@ -146,20 +156,19 @@
 
         const itemsSizes = [];
 
+        // Collect the sizes of all items
         for (let i = 0; i < list.children.length; i++) {
           const item = list.children[i];
           const itemSize = this.getSize(item);
           itemsSizes.push(itemSize);
         }
-
+        const indexSequence = [...Array(list.children.length).keys()];
+        const directionIndexes =
+          this.overflowDirection === 'start' ? indexSequence.reverse() : indexSequence;
         const overflowItemsIdx = [];
-        for (let i = 0; i < list.children.length; i++) {
-          const item = list.children[i];
+        directionIndexes.forEach(i => {
           const itemWidth = itemsSizes[i].width;
-
-          // If the item dont fit in the available space or if we have already
-          // overflowed items, we hide it. This means that once one item overflows,
-          // all the following items will be hidden.
+          const item = list.children[i];
           if (itemWidth >= availableWidth || overflowItemsIdx.length > 0) {
             overflowItemsIdx.push(i);
             item.style.visibility = 'hidden';
@@ -174,7 +183,7 @@
               maxHeight = itemHeight;
             }
           }
-        }
+        });
 
         // check if overflowed items would fit if the moreButton were not visible
         const overflowedWidth = overflowItemsIdx.reduce(
@@ -201,6 +210,7 @@
         list.style.maxWidth = `${maxWidth}px`;
         list.style.maxHeight = `${maxHeight}px`;
       },
+
       /**
        * Fixes the visibility of the dividers that are shown and hidden when the list overflows.
        * The visible list should not end with a divider, and the overflowed items should not
@@ -254,17 +264,17 @@
 
 
 <style scoped>
-
   .list-wrapper {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-between; 
     width: 100%;
   }
+
   .list {
     overflow: visible;
     display: flex;
     flex-wrap: wrap;
-    position: relative;
+    
     align-items: center;
   }
 
@@ -274,7 +284,15 @@
   }
 
   .more-button-wrapper {
-    visibility: hidden;
+    visibility: visible;
+    order: 0; /* Ensure it remains in its original position for keyboard navigation */
+  }
+
+  /* When the 'start-button' class is added, position visually at the start */
+  .more-button-wrapper.start-button {
+    order: -1; /* Moves visually to the start */
+    z-index: 1; /* Ensure it's in front if needed */
   }
 
 </style>
+