diff --git a/app/assets/javascripts/lib/utils/breadcrumbs.js b/app/assets/javascripts/lib/utils/breadcrumbs.js
index e38094fc895b3216c620b890f63d0f89d1d41ccc..9404c2695d5048571960f7f295b5edb032b378f9 100644
--- a/app/assets/javascripts/lib/utils/breadcrumbs.js
+++ b/app/assets/javascripts/lib/utils/breadcrumbs.js
@@ -10,6 +10,10 @@ export const injectVueAppBreadcrumbs = (router, BreadcrumbsComponent, apolloProv
 
   const breadcrumbEl = breadcrumbEls[breadcrumbEls.length - 1];
 
+  // Allow element to grow. GlBreadcrumb would otherwise not take all available space
+  // but show some of its items unnecessarily in the collapse dropdown.
+  breadcrumbEl.classList.add('gl-flex-grow-1');
+
   const lastCrumb = breadcrumbEl.children[0];
   const nestedBreadcrumbEl = document.createElement('div');
 
diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue
index ac1df5cf93fec9750aa93175ecd43b7483f07187..b8caf56fbd702853cdea156b688b5fbcff6fa22d 100644
--- a/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue
+++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/harbor_registry_breadcrumb.vue
@@ -2,13 +2,12 @@
 // Since app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
 // can only handle two levels of breadcrumbs, but we have three levels here.
 // So we extended the registry_breadcrumb.vue component with harbor_registry_breadcrumb.vue to support multiple levels of breadcrumbs
-import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { GlBreadcrumb } from '@gitlab/ui';
 import { isArray, last } from 'lodash';
 
 export default {
   components: {
     GlBreadcrumb,
-    GlIcon,
   },
   computed: {
     rootRoute() {
@@ -58,11 +57,5 @@ export default {
 </script>
 
 <template>
-  <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
-    <template #separator>
-      <span class="gl-mx-n5">
-        <gl-icon name="chevron-lg-right" :size="8" />
-      </span>
-    </template>
-  </gl-breadcrumb>
+  <gl-breadcrumb :key="isLoaded" :items="allCrumbs" />
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
index e7b4229052e1e3d1cf56cb4b9b06c10e6fdb3c5f..b34516a3eb7fbea4331fdd0a2c332394cfc10c0a 100644
--- a/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
+++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
@@ -3,12 +3,11 @@
 // until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079
 //
 // See the CSS workaround in app/assets/stylesheets/pages/registry.scss when this file is changed.
-import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { GlBreadcrumb } from '@gitlab/ui';
 
 export default {
   components: {
     GlBreadcrumb,
-    GlIcon,
   },
   computed: {
     rootRoute() {
@@ -46,11 +45,5 @@ export default {
 </script>
 
 <template>
-  <gl-breadcrumb :key="isLoaded" :items="allCrumbs">
-    <template #separator>
-      <span class="gl-mx-n5">
-        <gl-icon name="chevron-lg-right" :size="8" />
-      </span>
-    </template>
-  </gl-breadcrumb>
+  <gl-breadcrumb :key="isLoaded" :items="allCrumbs" />
 </template>
diff --git a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
index a5c34b4b619728bedcbfcc8e063eed04c36cef1b..52327617d2622eda34543f5903a585d0d2704196 100644
--- a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
+++ b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
@@ -129,7 +129,7 @@ export default {
           class="gl-mr-2"
           :class="$options.JS_TOGGLE_EXPAND_CLASS"
         />
-        <gl-breadcrumb :items="breadcrumbs" data-testid="breadcrumb-links" />
+        <gl-breadcrumb :items="breadcrumbs" data-testid="breadcrumb-links" class="gl-flex-grow-1" />
       </div>
     </div>
 
diff --git a/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml b/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
index 417df51e98435b90433d5e46892551b9dc6af579..7fa31a4ff115095e308aba63318dd6a553b424a9 100644
--- a/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
@@ -3,7 +3,7 @@
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
 %nav.breadcrumbs.gl-breadcrumbs{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
-  %ul.breadcrumb.gl-breadcrumb-list.js-breadcrumbs-list
+  %ul.breadcrumb.gl-breadcrumb-list.js-breadcrumbs-list.gl-flex-grow-1
     - unless hide_top_links
       = header_title
     - if @breadcrumbs_extra_links
diff --git a/package.json b/package.json
index 158c309fd452fc8f744bd8c11890e34ee4e757c8..7c4956989bc0a927b32d7b0e7c1d14466ce08445 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/svgs": "3.91.0",
-    "@gitlab/ui": "78.2.3",
+    "@gitlab/ui": "78.3.0",
     "@gitlab/visual-review-tools": "1.7.3",
     "@gitlab/web-ide": "^0.0.1-dev-20240226152102",
     "@mattiasbuelens/web-streams-adapter": "^0.1.0",
diff --git a/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap b/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap
index e67bded6a7ed1d12b36cef19a37420ef4e1646a6..a0eec3e3010f6bc1f3bb482bfddd707782067a9a 100644
--- a/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap
+++ b/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = `
 <nav
   aria-label="Breadcrumb"
   class="gl-breadcrumbs"
+  style=""
 >
   <ol
     class="breadcrumb gl-breadcrumb-list"
@@ -11,21 +12,88 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = `
     <li
       class="gl-breadcrumb-item"
     >
-      <a
-        target="_self"
+      <div
+        class="gl-disclosure-dropdown gl-new-dropdown"
+        style="height: 16px;"
       >
-        <span />
-      </a>
+        <button
+          aria-controls="reference-1"
+          aria-expanded="false"
+          aria-labelledby="reference-0"
+          class="btn btn-default btn-icon btn-sm gl-button gl-new-dropdown-icon-only gl-new-dropdown-toggle gl-new-dropdown-toggle-no-caret"
+          data-testid="base-dropdown-toggle"
+          id="reference-0"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="gl-button-icon gl-icon s16"
+            data-testid="ellipsis_h-icon"
+            role="img"
+          >
+            <use
+              href="file-mock#ellipsis_h"
+            />
+          </svg>
+          <span
+            class="gl-button-text"
+          >
+            <span
+              class="gl-new-dropdown-button-text gl-sr-only"
+            >
+              Show more breadcrumbs
+            </span>
+          </span>
+        </button>
+        <div
+          class="gl-new-dropdown-panel"
+          data-testid="base-dropdown-menu"
+          id="reference-1"
+        >
+          <div
+            class="gl-new-dropdown-inner"
+          >
+            <ul
+              aria-labelledby="reference-0"
+              class="gl-new-dropdown-contents"
+              data-testid="disclosure-content"
+              id="reference-2"
+              tabindex="-1"
+            >
+              <li
+                class="gl-new-dropdown-item"
+                data-testid="disclosure-dropdown-item"
+                tabindex="0"
+              >
+                <a
+                  class="gl-new-dropdown-item-content"
+                  tabindex="-1"
+                  target="_self"
+                >
+                  <span
+                    class="gl-new-dropdown-item-text-wrapper"
+                  >
+                    mock name
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
     </li>
     <li
       class="gl-breadcrumb-item"
+      style="flex-shrink: 1; text-overflow: ellipsis; overflow-x: hidden; text-wrap: nowrap;"
     >
       <a
         aria-current="page"
         href="#"
         target="_self"
       >
-        <span />
+        <span>
+          mock name
+        </span>
       </a>
     </li>
   </ol>
@@ -36,18 +104,22 @@ exports[`Registry Breadcrumb when is rootRoute renders 1`] = `
 <nav
   aria-label="Breadcrumb"
   class="gl-breadcrumbs"
+  style=""
 >
   <ol
     class="breadcrumb gl-breadcrumb-list"
   >
     <li
       class="gl-breadcrumb-item"
+      style="flex-shrink: 1; text-overflow: ellipsis; overflow-x: hidden; text-wrap: nowrap;"
     >
       <a
         aria-current="page"
         target="_self"
       >
-        <span />
+        <span>
+          mock name
+        </span>
       </a>
     </li>
   </ol>
diff --git a/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js b/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
index c1f1a25d53b20e5269f8f74feac8cc9f04552e3f..7d09c0e925ece2a385fdc4bd4b9ec9ee81e9c4c7 100644
--- a/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
@@ -4,7 +4,10 @@ import component from '~/packages_and_registries/shared/components/registry_brea
 
 describe('Registry Breadcrumb', () => {
   let wrapper;
-  const nameGenerator = jest.fn();
+  const nameGenerator = jest.fn().mockImplementation(() => {
+    // return a non-empty name, otherwise item validations could fail.
+    return 'mock name';
+  });
 
   const routes = [
     { name: 'list', path: '/', meta: { nameGenerator, root: true } },
diff --git a/yarn.lock b/yarn.lock
index 4fbd8c2a4ffe396f028df3f650212ef573a0910e..77eed08f2e13cf2d0da68ff6fd7ee4e0131efc52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1326,10 +1326,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.91.0.tgz#e99bc5467318cc8c156e02c574f5e65941b767f0"
   integrity sha512-ozINZKyUlu5UQlP++9SntWQDqsgDSYawTPw+qhKQTdyn4Ut2NMsvSFyR5J2pax5IWu+SpLrn3WuPgNybK+4LqQ==
 
-"@gitlab/ui@78.2.3":
-  version "78.2.3"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-78.2.3.tgz#b13a0b8bfdb1f9d26db6e7a2d1a70f45c9c864bb"
-  integrity sha512-yJm8gVcqbPpHOJL77dDab42rc4JyB8PEircal2TwdfKmiSvZT98auJrL4280Wkvg0vblOyDZQdprPhgYnQZBwQ==
+"@gitlab/ui@78.3.0":
+  version "78.3.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-78.3.0.tgz#4567addd698c91f4755e085f51c31c426d1f182c"
+  integrity sha512-U1ojY0xPhioxPkFXcBRF66GOkX/troVpXXjk+dtFRNmOyxsSaqzkK0t55Dma0L4v7SATHjgEDtJ7ncRbXJ1THg==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     bootstrap-vue "2.23.1"