diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 589d7813b..daa79ae6b 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -1,137 +1,89 @@
 <template>
 
-  <div
-    v-show="showSingleItem || crumbs.length > 1"
-    :class="{ 'breadcrumbs-collapsed': collapsedCrumbs.length }"
-  >
-    <nav
-      class="breadcrumbs"
-      v-bind="$attrs"
-      :aria-label="$attrs.ariaLabel"
+  <div class="breadcrumbs">
+    <KListWithOverflow
+      overflowDirection="start"
+      :items="preparedCrumbs"
     >
-      <div
-        v-show="collapsedCrumbs.length"
-        class="breadcrumbs-dropdown-wrapper"
-      >
+      <!-- Render individual breadcrumb items -->
+      <template #item="{ item,index }">
+        <li>
+          <KRouterLink
+            v-if="item.link"
+            :text="item.text"
+            :to="item.link"
+            dir="auto"
+            :title="item.text"
+          >
+            <template #default="{ text }">
+              <span
+                class="breadcrumbs-crumb-text"
+                :style="{ maxWidth: index === items.length - 1 ? lastBreadcrumbMaxWidth : 'none' }"
+                dir="auto"
+                :title="text"
+              >{{ text }}</span>
+            </template>
+          </KRouterLink>
+          <span
+            v-else
+            class="breadcrumbs-crumb-text"
+            :style="{ maxWidth: index === items.length - 1 ? lastBreadcrumbMaxWidth : 'none' }"
+            dir="auto"
+            :title="item.text"
+          >{{ item.text }}</span>
+        </li>
+        
+      </template>
+
+      <template #divider>
+        <span
+          :style="{ color: $themeTokens.text }"
+          class="breadcrumbs-divider"
+        >›
+        </span>
+      </template>
+
+      <template #more="{ overflowItems }">
         <KIconButton
           size="small"
-          :icon="showDropdown ? 'chevronUp' : 'chevronDown'"
+          icon="chevronDown"
           appearance="raised-button"
-          @click="showDropdown = !showDropdown"
-        />
-        <div
-          v-if="showDropdown"
-          class="breadcrumbs-dropdown"
-          :style="{ background: $themeTokens.surface }"
         >
-          <ol class="breadcrumbs-dropdown-items">
-            <li
-              v-for="(crumb, index) in collapsedCrumbs"
-              :key="index"
-              class="breadcrumbs-dropdown-item"
+          <template #menu>
+            <KDropdownMenu
+              :options="
+                overflowItems
+                  .filter(item => item.type !== 'divider')
+                  .map(item => ({
+                    label: item.text,
+                    link: item.link ? item.link : null,
+                  }))
+              "
             >
-              <KRouterLink
-                v-if="crumb.link"
-                class="krouter-item"
-                :text="crumb.text"
-                :to="crumb.link"
-              >
-                <template #text="{ text }">
+              <template #option="{ option }">
+                <template v-if="option.link">
+                  <a
+                    :href="option.link"
+                    :style="{ color: $themeTokens.primary }"
+                    class="dropdown-link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {{ option.label }}
+                  </a>
+                </template>
+                <template v-else>
                   <span
-                    class="breadcrumbs-crumb-text"
-                    dir="auto"
-                  >{{ text }}</span>
+                    :style="{ color: $themeTokens.text }"
+                    class="dropdown-text"
+                  >{{ option.label }}</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>
-      </ol>
-    </div>
+            </KDropdownMenu>
+          </template>
+        </KIconButton>
+      </template>
+    </KListWithOverflow>
   </div>
 
 </template>
@@ -139,179 +91,67 @@
 
 <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
-   */
+  const DROPDOWN_BTN_WIDTH = 55;
   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() {
+      return {
+        lastBreadcrumbMaxWidth: `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH}px`,
+      };
+    },
 
-    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();
+      preparedCrumbs() {
+        const crumbs = [...this.items];
+        if (!this.showSingleItem && crumbs.length <= 1) {
+          return [];
+        }
+        // Add dividers between items
+        return crumbs.flatMap((item, index) => (index > 0 ? [{ type: 'divider' }, item] : [item]));
       },
     },
-    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);
+      this.updateLastBreadcrumbWidth();
+      this.$watch('items', () => {
+        this.updateLastBreadcrumbWidth();
+      });
     },
     methods: {
-      attachRefs() {
+      updateLastBreadcrumbWidth() {
         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();
+          const lastBreadcrumb = this.$refs.lastBreadcrumb;
+          if (lastBreadcrumb) {
+            const lastBreadcrumbWidth = lastBreadcrumb.getBoundingClientRect().width;
+            const availableWidth = this.$el.offsetWidth - DROPDOWN_BTN_WIDTH; 
+            this.lastBreadcrumbMaxWidth = `${Math.min(lastBreadcrumbWidth, availableWidth)}px`;
+          }
         });
-      },
-      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`;
-            }
-          });
-        }
-      },
-    },
+      }
+    }
   };
 
 </script>
 
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 
-  @import './styles/definitions';
   $crumb-max-width: 300px;
 
   .breadcrumbs {
     height: 32px;
     margin-top: 8px;
     margin-bottom: 8px;
+    overflow: visible;
     font-size: 16px;
     font-weight: bold;
     line-height: 32px;
@@ -328,72 +168,33 @@
     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;
-    font-weight: bold;
-  }
-
-  .breadcrumbs-dropdown-items {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  .breadcrumbs-divider {
+    margin-right: 8px;
+    margin-left: 8px;
   }
 
-  .breadcrumbs-dropdown-item {
-    display: block;
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    .krouter-item {
-      width: 100%;
-    }
+  li {
+    position: static;
+    display: inline;
+    max-width: inherit;
+    overflow: hidden;
   }
 
-  .breadcrumbs-visible-items {
+  .dropdown-link {
     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);
-    }
+    padding: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    text-decoration: underline;
+    cursor: pointer;
+    background-color: transparent;
   }
 
-  .breadcrumbs-visible-item {
+  .dropdown-text {
     display: inline-block;
-    max-width: 100%;
-  }
-
-  .breadcrumbs-visible-item-notlast {
-    &::after {
-      margin-right: 8px;
-      margin-left: 8px;
-      content: '›';
-    }
-  }
-
-  .breadcrumbs-offscreen {
-    position: absolute;
-    left: -1000em;
+    padding: 16px;
+    font-size: 16px;
+    background-color: transparent;
   }
 
 </style>
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
index 426619456..14a3d3862 100644
--- a/lib/KDropdownMenu.vue
+++ b/lib/KDropdownMenu.vue
@@ -17,12 +17,11 @@
     >
       <!-- Slot to set a header to the dropdown menu -->
       <slot name="header"></slot>
-      <UiMenu
-        ref="menu"
-        :options="options"
-        :hasIcons="hasIcons"
-        @select="handleSelection"
-      />
+      <UiMenu ref="menu" :options="options" :hasIcons="hasIcons" @select="handleSelection">
+        <template #option="{ option }">
+          <slot name="option" :option="option"></slot>
+        </template> 
+      </UiMenu>
     </UiPopover>
   </div>
 
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index 3ce1a218e..afbfe4a85 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -5,6 +5,19 @@
     class="list-wrapper"
     :style="appearanceOverrides"
   >
+    <!-- Render More Button Before List for 'start' Direction -->
+    <div
+      v-if="overflowDirection === 'start'"
+      ref="moreButtonWrapper"
+      class="more-button-wrapper"
+    >
+      <slot
+        v-if="isMoreButtonVisible"
+        name="more"
+        :overflowItems="overflowItems"
+      ></slot>
+    </div>
+
     <div
       ref="list"
       class="list"
@@ -15,8 +28,7 @@
           v-if="isDivider(item)"
           name="divider"
           :divider="item"
-        >
-        </slot>
+        ></slot>
         <!-- @slot Slot responsible of rendering each item in the visible list -->
         <slot
           v-else
@@ -25,7 +37,10 @@
         ></slot>
       </template>
     </div>
+
+    <!-- Render More Button After List for 'end' Direction -->
     <div
+      v-if="overflowDirection === 'end'"
       ref="moreButtonWrapper"
       class="more-button-wrapper"
     >
@@ -72,6 +87,13 @@
         type: [Object, String],
         default: null,
       },
+      overflowDirection: {
+        type: String,
+        default: 'start',
+        validator(value) {
+          return ['start', 'end'].includes(value);
+        },
+      },
     },
     data() {
       return {
@@ -122,7 +144,15 @@
         if (!element) {
           return { width: 0, height: 0 };
         }
-        const { width, height } = element.getBoundingClientRect();
+        let { width, height } = element.getBoundingClientRect();
+
+        const style = element.currentStyle || window.getComputedStyle(element);
+        const marginX = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        const marginY = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+
+        width += marginX;
+        height += marginY;
+
         return { width, height };
       },
       /**
@@ -131,6 +161,7 @@
        */
       setOverflowItems() {
         const { list, listWrapper, moreButtonWrapper } = this.$refs;
+
         if (!this.mounted || !listWrapper || !list) {
           this.overflowItems = [];
           return;
@@ -153,15 +184,13 @@
           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';
@@ -176,7 +205,7 @@
               maxHeight = itemHeight;
             }
           }
-        }
+        });
 
         // check if overflowed items would fit if the moreButton were not visible
         const overflowedWidth = overflowItemsIdx.reduce(
@@ -188,6 +217,7 @@
             const idx = overflowItemsIdx.pop();
             const item = list.children[idx];
             item.style.visibility = 'visible';
+            item.style.position = 'unset';
             maxWidth += itemsSizes[idx].width;
           }
         }
@@ -203,6 +233,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
@@ -217,16 +248,24 @@
         }
 
         const { list } = this.$refs;
-        const [firstOverflowedIdx] = overflowItemsIdx;
-        if (this.isDivider(this.items[firstOverflowedIdx])) {
-          overflowItemsIdx.shift();
-        }
+        if (this.overflowDirection === 'start') {
+          const [firstOverflowedIdx] = overflowItemsIdx;
+          const OverflowedIdx = list.children.length - 1 - firstOverflowedIdx;
+          if (this.isDivider(this.items[OverflowedIdx])) {
+            overflowItemsIdx.shift();
+          }
+        } else {
+          const [firstOverflowedIdx] = overflowItemsIdx;
+          if (this.isDivider(this.items[firstOverflowedIdx])) {
+            overflowItemsIdx.shift();
+          }
 
-        const lastVisibleIdx = firstOverflowedIdx - 1;
-        if (this.isDivider(this.items[lastVisibleIdx])) {
-          const dividerNode = list.children[lastVisibleIdx];
-          dividerNode.style.visibility = 'hidden';
-          return itemsSizes[lastVisibleIdx].width;
+          const lastVisibleIdx = firstOverflowedIdx - 1;
+          if (this.isDivider(this.items[lastVisibleIdx])) {
+            const dividerNode = list.children[lastVisibleIdx];
+            dividerNode.style.visibility = 'hidden';
+            return itemsSizes[lastVisibleIdx].width;
+          }
         }
       },
       /**
@@ -259,25 +298,26 @@
 
   .list-wrapper {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     width: 100%;
   }
 
   .list {
     position: relative;
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
-    overflow: visible;
+    overflow: hidden;
   }
 
   .list > * {
     flex-shrink: 0;
+    min-width: 0;
     visibility: hidden;
   }
 
   .more-button-wrapper {
-    visibility: hidden;
+    visibility: visible;
   }
 
 </style>