From 93a32ffe1e020b0bc1ea86c923f1b86acb6efb99 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.de>
Date: Mon, 2 Sep 2024 18:30:02 +0200
Subject: [PATCH] feat: Make breadcrumb responsive

---
 pages/breadcrumb-group/events.page.tsx        |  9 +-
 pages/breadcrumb-group/responsive.page.tsx    | 63 ++++++++++++
 .../breadcrumb-group/responsiveness.page.tsx  | 60 +++++++++++
 .../__tests__/global-breadcrumbs.test.tsx     |  6 +-
 .../__integ__/breadcrumb-group.test.ts        | 56 ++++++++++-
 .../__tests__/analytics-metadata.test.tsx     | 16 ++-
 .../__tests__/breadcrumb-group.test.tsx       | 39 +++++++-
 .../__tests__/breadcrumb-item.test.tsx        | 17 ----
 src/breadcrumb-group/__tests__/utils.test.ts  | 99 +++++++++++++++++++
 .../__tests__/widgetized-breadcrumbs.test.tsx | 15 +--
 src/breadcrumb-group/implementation.tsx       | 87 ++++++++++++----
 src/breadcrumb-group/interfaces.ts            |  5 +-
 src/breadcrumb-group/item/funnel.tsx          |  7 +-
 src/breadcrumb-group/item/item.tsx            | 58 ++++-------
 src/breadcrumb-group/item/styles.scss         | 25 ++---
 src/breadcrumb-group/styles.scss              | 50 +++-------
 src/breadcrumb-group/utils.ts                 | 61 ++++++++++++
 17 files changed, 525 insertions(+), 148 deletions(-)
 create mode 100644 pages/breadcrumb-group/responsive.page.tsx
 create mode 100644 pages/breadcrumb-group/responsiveness.page.tsx
 create mode 100644 src/breadcrumb-group/__tests__/utils.test.ts

diff --git a/pages/breadcrumb-group/events.page.tsx b/pages/breadcrumb-group/events.page.tsx
index d4d550b5868..7d8d4a5fb73 100644
--- a/pages/breadcrumb-group/events.page.tsx
+++ b/pages/breadcrumb-group/events.page.tsx
@@ -6,7 +6,7 @@ import { SpaceBetween } from '~components';
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '~components/breadcrumb-group';
 
 import ScreenshotArea from '../utils/screenshot-area';
-const items = [
+const defaultItems = [
   'First that is very very very very very very long long long text',
   'Second',
   'Third',
@@ -27,6 +27,7 @@ export default function ButtonDropdownPage() {
   const onClickCallback = (event: CustomEvent<BreadcrumbGroupProps.ClickDetail>) => {
     setOnClickMessage(`OnClick: ${event.detail.text} item was selected`);
   };
+  const [items, setItems] = useState(defaultItems);
   return (
     <ScreenshotArea disableAnimations={true}>
       <article>
@@ -56,6 +57,12 @@ export default function ButtonDropdownPage() {
               items={shortItems.map(text => ({ text, href: `#` }))}
             />
           </div>
+          <button type="button" id="add" onClick={() => setItems([...items, defaultItems[5]])}>
+            Add
+          </button>
+          <button type="button" id="remove" onClick={() => setItems(items.slice(0, items.length - 1))}>
+            Remove
+          </button>
         </SpaceBetween>
       </article>
     </ScreenshotArea>
diff --git a/pages/breadcrumb-group/responsive.page.tsx b/pages/breadcrumb-group/responsive.page.tsx
new file mode 100644
index 00000000000..417c72e4746
--- /dev/null
+++ b/pages/breadcrumb-group/responsive.page.tsx
@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import BreadcrumbGroup from '~components/breadcrumb-group';
+import SpaceBetween from '~components/space-between';
+
+export default function ResponsiveBreadcrumbsPage() {
+  return (
+    <article>
+      <Box padding="xl">
+        <SpaceBetween size="xxl">
+          <h1>Responsive breadcrumbs</h1>
+          <ResponsiveBreadcrumbs
+            widths={[900, 800, 700, 600, 500, 400, 300, 200]}
+            items={[
+              'A',
+              'Longer breadrcumb',
+              'ABC',
+              'Another even longer breadcrumb',
+              'ABCDEF',
+              'ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd',
+            ]}
+          />
+          <ResponsiveBreadcrumbs widths={[150]} items={['Small', 'Small', 'Small', 'Small', 'Small']} />
+          <ResponsiveBreadcrumbs
+            widths={[150]}
+            items={['Large breadcrumb', 'Large breadcrumb', 'Large breadcrumb', 'Large breadcrumb', 'Large breadcrumb']}
+          />
+          <ResponsiveBreadcrumbs widths={[100]} items={['Small', 'Small']} />
+          <ResponsiveBreadcrumbs widths={[100]} items={['Large breadcrumb', 'Large breadcrumb']} />
+          <ResponsiveBreadcrumbs widths={[100]} items={['Large breadcrumb', 'Small']} />
+          <ResponsiveBreadcrumbs widths={[30]} items={['Small']} />
+          <ResponsiveBreadcrumbs widths={[30]} items={['Large breadcrumb']} />
+        </SpaceBetween>
+      </Box>
+    </article>
+  );
+}
+
+interface ResponsiveBreadcrumbsProps {
+  items: Array<string>;
+  widths: Array<number>;
+}
+
+const ResponsiveBreadcrumbs = ({ items, widths }: ResponsiveBreadcrumbsProps) => {
+  const breadcrumbs = items.map(text => ({ text, href: `#` }));
+  return (
+    <SpaceBetween size="xxl">
+      {widths.map((width, key) => (
+        <div key={key} style={{ width, borderInlineEnd: '2px solid blue' }}>
+          <BreadcrumbGroup
+            key={key}
+            ariaLabel="Navigation long text"
+            expandAriaLabel="Show path for long text"
+            items={breadcrumbs}
+          />
+        </div>
+      ))}
+    </SpaceBetween>
+  );
+};
diff --git a/pages/breadcrumb-group/responsiveness.page.tsx b/pages/breadcrumb-group/responsiveness.page.tsx
new file mode 100644
index 00000000000..7b15fc4a93e
--- /dev/null
+++ b/pages/breadcrumb-group/responsiveness.page.tsx
@@ -0,0 +1,60 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Button, FormField, SpaceBetween, Textarea } from '~components';
+import BreadcrumbGroup from '~components/breadcrumb-group';
+import Input from '~components/input';
+
+export default function ResponsiveBreadcrumbsPage() {
+  const [itemsLists, setItemsLists] = useState([
+    ['A', 'AB', 'ABC', 'ABCD', 'ABCDEF', 'ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd'],
+    ['EC2', 'Instances', 'i-03abdc1839101a53f'],
+    [
+      'Amazon S3',
+      'Buckets',
+      '164981592106-us-east-1-athena-results-bucket-n8qxkwo99y',
+      '5d04ca725b8547220d019af4d3g0ae11',
+    ],
+  ]);
+  const [minBreadcrumbWidth, setMinBreadcrumbWidth] = useState<string | undefined>('120');
+  const [newBreadcrumb, setNewBreadcrumb] = useState<string>('["A", "AB", "ABCDEFGHIJsjbdkasbdhjabsjdhasjhdabsjd"]');
+  return (
+    <article>
+      <SpaceBetween size="xxl">
+        <h1>Responsive breadcrumbs</h1>
+        <FormField label="Enter minimum width">
+          <Input
+            type="number"
+            value={minBreadcrumbWidth || ''}
+            onChange={evt => {
+              setMinBreadcrumbWidth(evt.detail.value || undefined);
+            }}
+          />
+        </FormField>
+        <FormField
+          label="Add breadcrumb"
+          secondaryControl={
+            <Button onClick={() => setItemsLists([...itemsLists, JSON.parse(newBreadcrumb)])}>Add</Button>
+          }
+        >
+          <Textarea
+            value={newBreadcrumb}
+            onChange={evt => {
+              setNewBreadcrumb(evt.detail.value);
+            }}
+          />
+        </FormField>
+        <hr />
+        {itemsLists.map((items, key) => (
+          <BreadcrumbGroup
+            key={key}
+            ariaLabel="Navigation long text"
+            expandAriaLabel="Show path for long text"
+            items={items.map(text => ({ text, href: `#` }))}
+          />
+        ))}
+      </SpaceBetween>
+    </article>
+  );
+}
diff --git a/src/app-layout/__tests__/global-breadcrumbs.test.tsx b/src/app-layout/__tests__/global-breadcrumbs.test.tsx
index 68099a76896..c1244d75145 100644
--- a/src/app-layout/__tests__/global-breadcrumbs.test.tsx
+++ b/src/app-layout/__tests__/global-breadcrumbs.test.tsx
@@ -263,7 +263,9 @@ describe('without feature flag', () => {
 
 test('renders analytics metadata information', async () => {
   activateAnalyticsMetadata(true);
-  await renderAsync(<AppLayout content={<BreadcrumbGroup items={defaultBreadcrumbs} />} />);
+  await renderAsync(
+    <AppLayout content={<BreadcrumbGroup items={defaultBreadcrumbs} ariaLabel="global breadcrumbs" />} />
+  );
   const breadcrumbsWrapper = wrapper.findAppLayout()!.findContentRegion().findBreadcrumbGroup()!;
   const firstBreadcrumb = breadcrumbsWrapper.findBreadcrumbLink(1)!.getElement();
   expect(getGeneratedAnalyticsMetadata(firstBreadcrumb)).toEqual({
@@ -278,7 +280,7 @@ test('renders analytics metadata information', async () => {
         type: 'component',
         detail: {
           name: 'awsui.BreadcrumbGroup',
-          label: 'Home...Page',
+          label: 'global breadcrumbs',
         },
       },
     ],
diff --git a/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts b/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts
index d0db7685ed4..262aa6b4683 100644
--- a/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts
+++ b/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts
@@ -5,6 +5,7 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
 
+import breadcrumbGroupStyles from '../../../lib/components/breadcrumb-group/styles.selectors.js';
 import tooltipStyles from '../../../lib/components/internal/components/tooltip/styles.selectors.js';
 
 const breadcrumbGroupWrapper = createWrapper().findBreadcrumbGroup();
@@ -15,7 +16,7 @@ const dropdownItemsSelector = dropdownWrapper.findItems().toSelector();
 
 class BreadcrumbGroupPage extends BasePageObject {
   setMobileViewport() {
-    return this.setWindowSize({ width: 600, height: 800 });
+    return this.setWindowSize({ width: 400, height: 800 });
   }
   isDropdownVisible() {
     return this.isDisplayed(dropdownSelector);
@@ -32,6 +33,14 @@ class BreadcrumbGroupPage extends BasePageObject {
   clickItem(index: number) {
     return this.click(dropdownWrapper.findItems().get(index).toSelector());
   }
+  getActiveElemenId() {
+    return this.browser.execute(function () {
+      return document.activeElement!.id;
+    });
+  }
+  isEllipsisVisible() {
+    return this.isExisting(`.${breadcrumbGroupStyles.ellipsis}.${breadcrumbGroupStyles.visible}`);
+  }
 }
 const setupTest = (testFn: (page: BreadcrumbGroupPage, browser: WebdriverIO.Browser) => Promise<void>) => {
   return useBrowser(async browser => {
@@ -45,11 +54,37 @@ describe('BreadcrumbGroup', () => {
   test(
     'Has proper number of items in the dropdown',
     setupTest(async page => {
-      await page.setMobileViewport();
+      await page.setWindowSize({ width: 645, height: 800 });
+      await page.openDropdown();
+      expect(await page.getElementsCount(dropdownItemsSelector)).toBe(1);
+      await page.closeDropdown();
+
+      await page.setWindowSize({ width: 570, height: 800 });
+      await page.openDropdown();
+      expect(await page.getElementsCount(dropdownItemsSelector)).toBe(2);
+      await page.closeDropdown();
+
+      await page.setWindowSize({ width: 500, height: 800 });
+      await page.openDropdown();
+      expect(await page.getElementsCount(dropdownItemsSelector)).toBe(3);
+      await page.closeDropdown();
+
+      await page.setWindowSize({ width: 400, height: 800 });
       await page.openDropdown();
       expect(await page.getElementsCount(dropdownItemsSelector)).toBe(4);
     })
   );
+  test(
+    'Adjusts display when adding/removing items',
+    setupTest(async page => {
+      await page.setWindowSize({ width: 700, height: 800 });
+      expect(page.isEllipsisVisible()).resolves.toBe(false);
+      await page.click('#add');
+      expect(page.isEllipsisVisible()).resolves.toBe(true);
+      await page.click('#remove');
+      expect(page.isEllipsisVisible()).resolves.toBe(false);
+    })
+  );
 
   test(
     'Dropdown trigger [...] is focused after the dropdown is closed',
@@ -103,11 +138,26 @@ describe('BreadcrumbGroup', () => {
   );
 
   test(
-    'Attachs funnel name attribute to last breadcrumb item',
+    'Attaches funnel name attribute to last breadcrumb item',
     setupTest(async (page, browser) => {
       await page.setMobileViewport();
       const funnelName = await browser.$('[data-analytics-funnel-key="funnel-name"]').getText();
       expect(funnelName).toBe('Sixth that is very very very very very very long long long text');
     })
   );
+
+  test(
+    'Focus does not go into ghost replica',
+    setupTest(async page => {
+      await page.setWindowSize({ width: 1200, height: 800 });
+      await page.click('#focus-target-long-text');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await expect(page.getActiveElemenId()).resolves.toBe('focus-target-short-text');
+    })
+  );
 });
diff --git a/src/breadcrumb-group/__tests__/analytics-metadata.test.tsx b/src/breadcrumb-group/__tests__/analytics-metadata.test.tsx
index a0c5a703164..2dd9a1e4655 100644
--- a/src/breadcrumb-group/__tests__/analytics-metadata.test.tsx
+++ b/src/breadcrumb-group/__tests__/analytics-metadata.test.tsx
@@ -7,15 +7,19 @@ import { activateAnalyticsMetadata } from '@cloudscape-design/component-toolkit/
 import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata/utils';
 
 import BreadcrumbGroup from '../../../lib/components/breadcrumb-group';
-import { useMobile } from '../../../lib/components/internal/hooks/use-mobile';
+import { getItemsDisplayProperties } from '../../../lib/components/breadcrumb-group/utils';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import { validateComponentNameAndLabels } from '../../internal/__tests__/analytics-metadata-test-utils';
 
 import ownLabels from '../../../lib/components/breadcrumb-group/analytics-metadata/styles.css.js';
 import buttonDropdownLabels from '../../../lib/components/button-dropdown/analytics-metadata/styles.css.js';
 
-jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
-  useMobile: jest.fn().mockReturnValue(false),
+jest.mock('../../../lib/components/breadcrumb-group/utils', () => ({
+  getItemsDisplayProperties: jest.fn().mockReturnValue({
+    shrinkFactors: [0, 0, 0, 0],
+    minWidths: [100, 100, 100, 100],
+    collapsed: 0,
+  }),
 }));
 
 const labels = { ...ownLabels, ...buttonDropdownLabels };
@@ -79,7 +83,11 @@ describe('BreadcrumbGroup renders correct analytics metadata', () => {
     });
   });
   test('in mobile view', () => {
-    (useMobile as jest.Mock).mockReturnValue(true);
+    (getItemsDisplayProperties as jest.Mock).mockReturnValue({
+      shrinkFactors: [0, 0, 0, 0],
+      minWidths: [100, 100, 100, 100],
+      collapsed: 2,
+    });
     const wrapper = renderBreadcrumbGroup();
 
     const firstBreadcrumb = wrapper.findBreadcrumbLink(1)!.getElement();
diff --git a/src/breadcrumb-group/__tests__/breadcrumb-group.test.tsx b/src/breadcrumb-group/__tests__/breadcrumb-group.test.tsx
index a46083317d0..2a627377520 100644
--- a/src/breadcrumb-group/__tests__/breadcrumb-group.test.tsx
+++ b/src/breadcrumb-group/__tests__/breadcrumb-group.test.tsx
@@ -112,8 +112,8 @@ describe('BreadcrumbGroup Component', () => {
     // Test for AWSUI-6738
     test('all the icons stay visible when changing the items', () => {
       const { container, rerender } = render(<BreadcrumbGroup items={items} />);
-      const wrapper = createWrapper(container).findBreadcrumbGroup(`.${styles['breadcrumb-group']}`)!;
-      const getIcons = () => wrapper.findAll(`.${itemStyles.icon}`);
+      const wrapper = createWrapper(container).findBreadcrumbGroup()!;
+      const getIcons = () => wrapper.findAll(`.${itemStyles.breadcrumb} .${itemStyles.icon}`);
       expect(getIcons()).toHaveLength(2);
       rerender(<BreadcrumbGroup items={items.slice(0, 2)} />);
       rerender(<BreadcrumbGroup items={[]} />);
@@ -141,7 +141,7 @@ describe('BreadcrumbGroup Component', () => {
         }}
       />
     );
-    const wrapper = createWrapper(container).findBreadcrumbGroup(`.${styles['breadcrumb-group']}`)!;
+    const wrapper = createWrapper(container).findBreadcrumbGroup()!;
     wrapper.findBreadcrumbLink(2)!.click();
     expect(onClick).toHaveBeenCalledWith(items[1]);
   });
@@ -198,4 +198,37 @@ describe('BreadcrumbGroup Component', () => {
       expect(wrapper.findDropdown()?.findNativeButton().getElement()).toHaveAttribute('aria-label', 'Custom show path');
     });
   });
+
+  describe('Ghost breadcrumb group', () => {
+    test('has aria-hidden property', () => {
+      const breadCrumbGroup = renderBreadcrumbGroup({ items: [] });
+      expect(breadCrumbGroup.find(`.${styles.ghost}`)?.getElement()).toHaveAttribute('aria-hidden', 'true');
+    });
+    test('has tab-index=-1', () => {
+      const breadCrumbGroup = renderBreadcrumbGroup({
+        items: [
+          {
+            text: 'Item 1',
+            href: '/#1',
+          },
+          {
+            text: 'Item 2',
+            href: '/#3',
+          },
+          {
+            text: 'Item 3',
+            href: '/#3',
+          },
+        ],
+      });
+      expect(breadCrumbGroup.find(`.${styles.ghost}`)?.getElement()).toHaveAttribute('tabindex', '-1');
+      const anchors = breadCrumbGroup
+        .find(`.${styles.ghost}`)!
+        .findAll('a')
+        .map(wrapper => wrapper.getElement());
+      anchors.forEach(anchor => {
+        expect(anchor).toHaveAttribute('tabindex', '-1');
+      });
+    });
+  });
 });
diff --git a/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx b/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx
index 00b16718f1d..9f4cad824c3 100644
--- a/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx
+++ b/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx
@@ -7,13 +7,8 @@ import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
 
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '../../../lib/components/breadcrumb-group';
 import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../../lib/components/internal/analytics/selectors';
-import { useMobile } from '../../../lib/components/internal/hooks/use-mobile';
 import createWrapper, { BreadcrumbGroupWrapper } from '../../../lib/components/test-utils/dom';
 
-jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
-  useMobile: jest.fn().mockReturnValue(true),
-}));
-
 const renderBreadcrumbGroup = (props: BreadcrumbGroupProps) => {
   const { container } = render(<BreadcrumbGroup {...props} />);
   return createWrapper(container).findBreadcrumbGroup()!;
@@ -136,16 +131,4 @@ describe('BreadcrumbGroup Item', () => {
       expect(element.innerHTML).toBe(expectedFunnelName);
     });
   });
-
-  describe('compressed item', () => {
-    beforeEach(() => {
-      (useMobile as jest.Mock).mockReturnValue(true);
-    });
-
-    test('renders item content', () => {
-      const wrapper = renderBreadcrumbGroup({ items });
-
-      expect(wrapper.findBreadcrumbLinks()[0].getElement()).toHaveTextContent(items[0].text);
-    });
-  });
 });
diff --git a/src/breadcrumb-group/__tests__/utils.test.ts b/src/breadcrumb-group/__tests__/utils.test.ts
new file mode 100644
index 00000000000..c455b955ddb
--- /dev/null
+++ b/src/breadcrumb-group/__tests__/utils.test.ts
@@ -0,0 +1,99 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getItemsDisplayProperties } from '../utils';
+
+describe('getItemsDisplayProperties', () => {
+  test('does not break with zero items', () => {
+    const displayProperties = getItemsDisplayProperties([], 90);
+    expect(displayProperties).toEqual({
+      shrinkFactors: [],
+      minWidths: [],
+      collapsed: 0,
+    });
+  });
+  test('returns correct shrinkFactors', () => {
+    const { shrinkFactors } = getItemsDisplayProperties([20, 300, 0, 1000, 150], 0);
+    expect(shrinkFactors).toEqual([0, 300, 0, 1000, 0]);
+  });
+  test('returns correct minWidths', () => {
+    const { minWidths } = getItemsDisplayProperties([20, 300, 0, 1000, 150], 0);
+    expect(minWidths).toEqual([0, 150, 0, 150, 0]);
+  });
+  test('returns correct number of collapsed items', () => {
+    const itemsWidths = [20, 300, 500, 60, 150, 1000];
+    [
+      [3000, 0],
+      [730, 0],
+      [729, 1], // second breadcrumb collapses
+      [580, 1],
+      [579, 2], // third breadcrumb collapses
+      [430, 2],
+      [429, 3], // fourth breadcrumb collapses
+      [370, 3],
+      [369, 4], // fifth breadcrumb collapses
+      [250, 4],
+      [10, 4],
+      [-10, 4],
+    ].forEach(([navWidth, expectedCollapsed]) =>
+      expect(getItemsDisplayProperties(itemsWidths, navWidth).collapsed).toEqual(expectedCollapsed)
+    );
+  });
+  describe('adjusts to small container widths', () => {
+    describe('with one item', () => {
+      test('smaller than default min width and bigger than available width', () => {
+        expect(getItemsDisplayProperties([100], 90)).toEqual({
+          shrinkFactors: [100],
+          minWidths: [90],
+          collapsed: 0,
+        });
+      });
+      test('smaller than default min width and smaller than available width', () => {
+        expect(getItemsDisplayProperties([80], 90)).toEqual({
+          shrinkFactors: [0],
+          minWidths: [0],
+          collapsed: 0,
+        });
+      });
+
+      test('bigger than default min width and bigger than available width', () => {
+        expect(getItemsDisplayProperties([160], 90)).toEqual({
+          shrinkFactors: [160],
+          minWidths: [90],
+          collapsed: 0,
+        });
+      });
+    });
+  });
+  describe('with two items', () => {
+    test('both bigger than default min width and bigger than available width', () => {
+      expect(getItemsDisplayProperties([160, 160], 90)).toEqual({
+        shrinkFactors: [160, 160],
+        minWidths: [45, 45],
+        collapsed: 0,
+      });
+    });
+    test('both smaller than default min width and bigger than available width', () => {
+      expect(getItemsDisplayProperties([100, 100], 90)).toEqual({
+        shrinkFactors: [100, 100],
+        minWidths: [45, 45],
+        collapsed: 0,
+      });
+    });
+  });
+  describe('with more than two items', () => {
+    test('first and last bigger than default min width and bigger than available width', () => {
+      expect(getItemsDisplayProperties([160, 200, 20, 140, 160], 320)).toEqual({
+        shrinkFactors: [160, 200, 0, 140, 160],
+        minWidths: [135, 135, 0, 135, 135],
+        collapsed: 3,
+      });
+    });
+    test('first and last smaller than default min width and bigger than available width', () => {
+      expect(getItemsDisplayProperties([140, 200, 20, 140, 140], 320)).toEqual({
+        shrinkFactors: [140, 200, 0, 140, 140],
+        minWidths: [135, 135, 0, 135, 135],
+        collapsed: 3,
+      });
+    });
+  });
+});
diff --git a/src/breadcrumb-group/__tests__/widgetized-breadcrumbs.test.tsx b/src/breadcrumb-group/__tests__/widgetized-breadcrumbs.test.tsx
index 31a666e3af1..68d70714467 100644
--- a/src/breadcrumb-group/__tests__/widgetized-breadcrumbs.test.tsx
+++ b/src/breadcrumb-group/__tests__/widgetized-breadcrumbs.test.tsx
@@ -27,8 +27,8 @@ const defaultProps: BreadcrumbGroupProps = {
 
 const WidgetizedBreadcrumbs = createWidgetizedBreadcrumbGroup(BreadcrumbGroupSkeleton);
 
-function getFunnelNameElement(container: HTMLElement) {
-  return container.querySelector(getFunnelNameSelector());
+function getFunnelNameElements(container: HTMLElement) {
+  return container.querySelectorAll(getFunnelNameSelector());
 }
 
 jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
@@ -43,7 +43,8 @@ describe('Classic design', () => {
   test('should render normal layout by default', () => {
     const { wrapper, container } = renderComponent(<WidgetizedBreadcrumbs {...defaultProps} />);
     expect(wrapper).toBeTruthy();
-    expect(getFunnelNameElement(container)).toHaveTextContent('Page name');
+    expect(getFunnelNameElements(container).length).toEqual(1);
+    expect(getFunnelNameElements(container)[0]).toHaveTextContent('Page name');
   });
 });
 
@@ -55,20 +56,22 @@ describe('Refresh design', () => {
   test('should render normal layout by default', () => {
     const { wrapper, container } = renderComponent(<WidgetizedBreadcrumbs {...defaultProps} />);
     expect(wrapper).toBeTruthy();
-    expect(getFunnelNameElement(container)).toHaveTextContent('Page name');
+    expect(getFunnelNameElements(container).length).toEqual(1);
+    expect(getFunnelNameElements(container)[0]).toHaveTextContent('Page name');
   });
 
   describeWithAppLayoutFeatureFlagEnabled(() => {
     test('should render funnel name using loader', () => {
       const { wrapper, container } = renderComponent(<WidgetizedBreadcrumbs {...defaultProps} />);
       expect(wrapper).toBeFalsy();
-      expect(getFunnelNameElement(container)).toHaveTextContent('Page name');
+      expect(getFunnelNameElements(container).length).toEqual(1);
+      expect(getFunnelNameElements(container)[0]).toHaveTextContent('Page name');
     });
 
     test('should not render funnel name if breadcrumbs list is empty', () => {
       const { wrapper, container } = renderComponent(<WidgetizedBreadcrumbs items={[]} />);
       expect(wrapper).toBeFalsy();
-      expect(getFunnelNameElement(container)).toEqual(null);
+      expect(getFunnelNameElements(container).length).toEqual(0);
     });
   });
 });
diff --git a/src/breadcrumb-group/implementation.tsx b/src/breadcrumb-group/implementation.tsx
index bff2a5554bf..152c7f6c07c 100644
--- a/src/breadcrumb-group/implementation.tsx
+++ b/src/breadcrumb-group/implementation.tsx
@@ -1,8 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { InternalButton } from '../button/internal';
@@ -12,7 +14,7 @@ import { useInternalI18n } from '../i18n/context';
 import InternalIcon from '../icon/internal';
 import { getBaseProps } from '../internal/base-component';
 import { fireCancelableEvent } from '../internal/events';
-import { useMobile } from '../internal/hooks/use-mobile';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
 import { createWidgetizedComponent } from '../internal/widgets';
 import {
@@ -21,7 +23,7 @@ import {
 } from './analytics-metadata/interfaces';
 import { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';
 import { BreadcrumbItem } from './item/item';
-import { getEventDetail } from './utils';
+import { getEventDetail, getItemsDisplayProperties } from './utils';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -64,11 +66,12 @@ const EllipsisDropdown = ({
   dropdownItems,
   onDropdownItemClick,
   onDropdownItemFollow,
+  visible,
 }: EllipsisDropdownProps) => {
   const i18n = useInternalI18n('breadcrumb-group');
 
   return (
-    <li className={styles.ellipsis}>
+    <li className={clsx(styles.ellipsis, visible && styles.visible)}>
       <InternalButtonDropdown
         ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}
         items={dropdownItems}
@@ -92,6 +95,16 @@ const EllipsisDropdown = ({
   );
 };
 
+interface ItemsRefsType {
+  ghost: Record<string, HTMLLIElement>;
+  real: Record<string, HTMLLIElement>;
+}
+
+interface ItemsWidthsType {
+  ghost: Array<number>;
+  real: Array<number>;
+}
+
 export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({
   items = [],
   ariaLabel,
@@ -106,10 +119,42 @@ export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Ite
     checkSafeUrl('BreadcrumbGroup', item.href);
   }
   const baseProps = getBaseProps(props);
-  const isMobile = useMobile();
+  const [navWidth, navRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);
+  const mergedRef = useMergeRefs(navRef, __internalRootRef);
+
+  const itemsRefs = useRef<ItemsRefsType>({ ghost: {}, real: {} });
+  const setBreadcrumb = (type: keyof ItemsRefsType, index: string, node: null | HTMLLIElement) => {
+    if (node) {
+      itemsRefs.current[type][index] = node;
+    } else {
+      delete itemsRefs.current[type][index];
+    }
+  };
+
+  const [itemsWidths, setItemsWidths] = useState<ItemsWidthsType>({ ghost: [], real: [] });
+
+  useEffect(() => {
+    if (itemsRefs.current) {
+      const newItemsWidths: ItemsWidthsType = { ghost: [], real: [] };
+      for (const node of Object.entries(itemsRefs.current.ghost)) {
+        const width = getLogicalBoundingClientRect(node[1]).inlineSize;
+        newItemsWidths.ghost.push(width);
+      }
+      for (const node of Object.entries(itemsRefs.current.real)) {
+        const width = getLogicalBoundingClientRect(node[1]).inlineSize;
+        newItemsWidths.real.push(width);
+      }
+      if (JSON.stringify(newItemsWidths) !== JSON.stringify(itemsWidths)) {
+        setItemsWidths(newItemsWidths);
+      }
+    }
+  }, [itemsWidths, items]);
+
+  const { shrinkFactors, minWidths, collapsed } = getItemsDisplayProperties(itemsWidths.ghost, navWidth);
 
   let breadcrumbItems = items.map((item, index) => {
     const isLast = index === items.length - 1;
+    const isDisplayed = index === 0 || index > collapsed;
 
     const clickAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupClick = {
       action: 'click',
@@ -119,25 +164,34 @@ export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Ite
         href: item.href || '',
       },
     };
-
     return (
       <li
-        className={styles.item}
+        className={clsx(styles.item, !isDisplayed && styles.hide)}
         key={index}
         {...(isLast ? {} : getAnalyticsMetadataAttribute(clickAnalyticsMetadata))}
+        style={{ flexShrink: shrinkFactors[index], minWidth: `${minWidths[index]}px` }}
+        ref={node => setBreadcrumb('real', `${index}`, node)}
       >
         <BreadcrumbItem
           item={item}
           onClick={onClick}
           onFollow={onFollow}
-          isCompressed={isMobile}
           isLast={isLast}
-          isDisplayed={!isMobile || isLast || index === 0}
+          isTruncated={itemsWidths.ghost[index] - itemsWidths.real[index] > 0}
         />
       </li>
     );
   });
 
+  const hiddenBreadcrumbItems = items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return (
+      <li className={styles.item} key={index} ref={node => setBreadcrumb('ghost', `${index}`, node)}>
+        <BreadcrumbItem item={item} isLast={isLast} isGhost={true} />
+      </li>
+    );
+  });
+
   const getEventItem = (e: CustomEvent<{ id: string }>) => {
     const { id } = e.detail;
     return items[parseInt(id)];
@@ -146,7 +200,7 @@ export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Ite
   // Add ellipsis
   if (breadcrumbItems.length >= 2) {
     const dropdownItems: Array<LinkItem> = items
-      .slice(1, items.length - 1)
+      .slice(1, 1 + collapsed)
       .map((item: BreadcrumbGroupProps.Item, index: number) => ({
         id: (index + 1).toString(), // the first item doesn't get inside dropdown
         text: item.text,
@@ -157,6 +211,7 @@ export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Ite
       breadcrumbItems[0],
       <EllipsisDropdown
         key={'ellipsis'}
+        visible={collapsed > 0}
         ariaLabel={expandAriaLabel}
         dropdownItems={dropdownItems}
         onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}
@@ -174,14 +229,9 @@ export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Ite
   return (
     <nav
       {...baseProps}
-      className={clsx(
-        styles['breadcrumb-group'],
-        isMobile && styles.mobile,
-        items.length <= 2 && styles['mobile-short'],
-        baseProps.className
-      )}
+      className={clsx(styles['breadcrumb-group'], baseProps.className)}
       aria-label={ariaLabel || undefined}
-      ref={__internalRootRef}
+      ref={mergedRef}
       {...(__injectAnalyticsComponentMetadata
         ? {
             ...getAnalyticsMetadataAttribute({
@@ -191,6 +241,9 @@ export function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Ite
         : {})}
     >
       <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>
+      <ol className={clsx(styles['breadcrumb-group-list'], styles.ghost)} aria-hidden={true} tabIndex={-1}>
+        {hiddenBreadcrumbItems}
+      </ol>
     </nav>
   );
 }
diff --git a/src/breadcrumb-group/interfaces.ts b/src/breadcrumb-group/interfaces.ts
index ab1cb680643..997c57743d0 100644
--- a/src/breadcrumb-group/interfaces.ts
+++ b/src/breadcrumb-group/interfaces.ts
@@ -63,9 +63,9 @@ export type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = B
 
 export interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {
   item: T;
-  isDisplayed: boolean;
+  isTruncated?: boolean;
   isLast?: boolean;
-  isCompressed?: boolean;
+  isGhost?: boolean;
   onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
   onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
 }
@@ -75,4 +75,5 @@ export interface EllipsisDropdownProps {
   dropdownItems: ReadonlyArray<LinkItem>;
   onDropdownItemClick: CancelableEventHandler<{ id: string }>;
   onDropdownItemFollow: CancelableEventHandler<{ id: string }>;
+  visible?: boolean;
 }
diff --git a/src/breadcrumb-group/item/funnel.tsx b/src/breadcrumb-group/item/funnel.tsx
index 723fa570602..ba93e619ed5 100644
--- a/src/breadcrumb-group/item/funnel.tsx
+++ b/src/breadcrumb-group/item/funnel.tsx
@@ -12,19 +12,20 @@ interface FunnelBreadcrumbItemProps {
   text: string;
   last: boolean;
   hidden?: boolean;
+  ghost?: boolean;
 }
 
 export const FunnelBreadcrumbItem = React.forwardRef<HTMLSpanElement, FunnelBreadcrumbItemProps>(
-  ({ text, hidden, last }, ref) => {
+  ({ text, hidden, last, ghost }, ref) => {
     const funnelAttributes: Record<string, string> = {};
-    if (last) {
+    if (last && !ghost) {
       funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
     }
 
     return (
       <span
         {...funnelAttributes}
-        className={clsx(styles.text, hidden && styles['text-hidden'], analyticsSelectors['breadcrumb-item'])}
+        className={clsx(styles.text, hidden && styles['text-hidden'], !ghost && analyticsSelectors['breadcrumb-item'])}
         ref={ref}
       >
         {text}
diff --git a/src/breadcrumb-group/item/item.tsx b/src/breadcrumb-group/item/item.tsx
index 1aeace57d24..a393d29b6b7 100644
--- a/src/breadcrumb-group/item/item.tsx
+++ b/src/breadcrumb-group/item/item.tsx
@@ -12,34 +12,19 @@ import { FunnelBreadcrumbItem } from './funnel';
 
 import styles from './styles.css.js';
 
-type BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {
+interface BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> {
   item: T;
   isLast: boolean;
   anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;
-};
+}
 
 const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
   item,
   isLast,
   anchorAttributes,
-  ...itemAttributes
 }: BreadcrumbItemWithPopoverProps<T>) => {
   const [showPopover, setShowPopover] = useState(false);
   const textRef = useRef<HTMLElement>(null);
-  const virtualTextRef = useRef<HTMLElement>(null);
-
-  const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {
-    if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {
-      return false;
-    }
-    const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;
-    const textWidth = textRef.current.getBoundingClientRect().width;
-    if (virtualTextWidth > textWidth) {
-      return true;
-    }
-    return false;
-  };
-
   const popoverContent = <Tooltip trackRef={textRef} value={item.text} />;
 
   useEffect(() => {
@@ -60,21 +45,17 @@ const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
     <>
       <Item
         isLast={isLast}
-        {...itemAttributes}
         onFocus={() => {
-          isTruncated(textRef, virtualTextRef) && setShowPopover(true);
+          setShowPopover(true);
         }}
         onBlur={() => setShowPopover(false)}
         onMouseEnter={() => {
-          isTruncated(textRef, virtualTextRef) && setShowPopover(true);
+          setShowPopover(true);
         }}
         onMouseLeave={() => setShowPopover(false)}
         anchorAttributes={anchorAttributes}
       >
         <FunnelBreadcrumbItem ref={textRef} text={item.text} last={isLast} />
-        <span className={styles['virtual-item']} ref={virtualTextRef}>
-          {item.text}
-        </span>
       </Item>
       {showPopover && popoverContent}
     </>
@@ -87,9 +68,11 @@ type ItemProps = React.HTMLAttributes<HTMLElement> & {
 };
 const Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>
   isLast ? (
-    <span {...itemAttributes}>{children}</span>
+    <span className={styles.anchor} {...itemAttributes}>
+      {children}
+    </span>
   ) : (
-    <a {...itemAttributes} {...anchorAttributes}>
+    <a className={styles.anchor} {...itemAttributes} {...anchorAttributes}>
       {children}
     </a>
   );
@@ -98,9 +81,9 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
   item,
   onClick,
   onFollow,
-  isDisplayed,
   isLast = false,
-  isCompressed = false,
+  isGhost = false,
+  isTruncated = false,
 }: BreadcrumbItemProps<T>) {
   const preventDefault = (event: React.MouseEvent) => event.preventDefault();
   const onClickHandler = (event: React.MouseEvent) => {
@@ -110,26 +93,21 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
     fireCancelableEvent(onClick, getEventDetail(item), event);
   };
 
-  const itemAttributes: React.HTMLAttributes<HTMLElement> = {
-    className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),
-  };
   const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {
     href: item.href || '#',
     onClick: isLast ? preventDefault : onClickHandler,
   };
+  if (isGhost) {
+    anchorAttributes.tabIndex = -1;
+  }
 
   return (
-    <div className={clsx(styles.breadcrumb, isLast && styles.last)}>
-      {isDisplayed && isCompressed ? (
-        <BreadcrumbItemWithPopover
-          item={item}
-          isLast={isLast}
-          anchorAttributes={anchorAttributes}
-          {...itemAttributes}
-        />
+    <div className={clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last)}>
+      {isTruncated && !isGhost ? (
+        <BreadcrumbItemWithPopover item={item} isLast={isLast} anchorAttributes={anchorAttributes} />
       ) : (
-        <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>
-          <FunnelBreadcrumbItem text={item.text} last={isLast} />
+        <Item isLast={isLast} anchorAttributes={anchorAttributes}>
+          <FunnelBreadcrumbItem text={item.text} last={isLast} ghost={isGhost} />
         </Item>
       )}
       {!isLast ? (
diff --git a/src/breadcrumb-group/item/styles.scss b/src/breadcrumb-group/item/styles.scss
index eca95ee3c43..c3f6e60179d 100644
--- a/src/breadcrumb-group/item/styles.scss
+++ b/src/breadcrumb-group/item/styles.scss
@@ -11,7 +11,8 @@
   display: none;
 }
 
-.breadcrumb {
+.breadcrumb,
+.ghost-breadcrumb {
   display: flex;
 
   > .icon {
@@ -22,6 +23,14 @@
 
   > .anchor {
     @include styles.link-inline('body-m');
+    min-inline-size: 0;
+    overflow: hidden;
+    > .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
 
     @include focus-visible.when-visible {
       @include styles.link-focus;
@@ -40,20 +49,6 @@
     }
   }
 }
-.compressed {
-  min-inline-size: 0;
-  overflow: hidden;
-  > .text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
-}
-.virtual-item {
-  @include styles.awsui-util-hide;
-  visibility: hidden;
-}
 
 .text-hidden {
   display: none;
diff --git a/src/breadcrumb-group/styles.scss b/src/breadcrumb-group/styles.scss
index d9645789072..7e0cd20164c 100644
--- a/src/breadcrumb-group/styles.scss
+++ b/src/breadcrumb-group/styles.scss
@@ -13,11 +13,6 @@
   padding-block: awsui.$space-xxs;
   padding-inline: 0;
 
-  > .item {
-    @include styles.styles-reset;
-    display: inline;
-  }
-
   > .breadcrumb-group-list {
     display: flex;
     align-items: center;
@@ -27,7 +22,13 @@
     margin-inline: 0;
     list-style: none;
     inline-size: 100%;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+
+    &.ghost {
+      flex-wrap: wrap;
+      position: absolute;
+      inset-inline-start: -9000px;
+    }
 
     > .item,
     > .ellipsis {
@@ -38,43 +39,22 @@
       margin-inline: 0;
     }
 
-    > .ellipsis {
+    > .item.hide {
       display: none;
-
-      > .icon {
-        margin-block: 0;
-        margin-inline: styles.$base-size;
-        color: awsui.$color-text-breadcrumb-icon;
-      }
     }
-  }
 
-  // In the smallest screen, breadcrumbs truncate into
-  // BC1 > ... > BCL
-  // and we apply ellipsis if the breadcrumb items are too long
-  &.mobile {
-    > .breadcrumb-group-list {
-      flex-wrap: nowrap;
+    > .ellipsis {
+      display: none;
 
-      > .ellipsis {
+      &.visible {
         display: flex;
         flex-shrink: 0;
       }
-      > .item {
-        min-inline-size: 0;
-        &:not(:first-child):not(:last-child) {
-          display: none;
-        }
-      }
-    }
-  }
 
-  // Test utils rely on the ellipsis being present even if there are
-  // only 2 items in the list, so we display but hide it.
-  &.mobile-short {
-    > .breadcrumb-group-list {
-      > .ellipsis {
-        display: none;
+      > .icon {
+        margin-block: 0;
+        margin-inline: styles.$base-size;
+        color: awsui.$color-text-breadcrumb-icon;
       }
     }
   }
diff --git a/src/breadcrumb-group/utils.ts b/src/breadcrumb-group/utils.ts
index 459681c67ba..c0c72a90fb7 100644
--- a/src/breadcrumb-group/utils.ts
+++ b/src/breadcrumb-group/utils.ts
@@ -7,3 +7,64 @@ export const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) =>
   text: item.text,
   href: item.href,
 });
+
+const defaultMinBreadcrumbWidth = 150;
+const ellipsisWidth = 50;
+
+export const getItemsDisplayProperties = (itemsWidths: Array<number>, navWidth: number | null) => {
+  const minBreadcrumbWidth = optimizeMinWidth(itemsWidths, navWidth);
+  const shrinkFactors = itemsWidths.map(width => (width <= minBreadcrumbWidth ? 0 : Math.round(width)));
+  const minWidths = itemsWidths.map(width => (width <= minBreadcrumbWidth ? 0 : minBreadcrumbWidth));
+  const collapsedWidths = itemsWidths.map(width => Math.min(width, minBreadcrumbWidth));
+
+  return {
+    shrinkFactors,
+    minWidths,
+    collapsed: computeNumberOfCollapsedItems(collapsedWidths, navWidth),
+  };
+};
+
+const computeNumberOfCollapsedItems = (collapsedWidths: Array<number>, navWidth: number | null): number => {
+  if (!navWidth) {
+    return 0;
+  }
+  let collapsed = 0;
+  const itemsCount = collapsedWidths.length;
+  if (itemsCount > 2) {
+    collapsed = itemsCount - 2;
+    let remainingWidth = navWidth - collapsedWidths[0] - collapsedWidths[itemsCount - 1] - ellipsisWidth;
+    let j = 1;
+    while (remainingWidth > 0 && j < itemsCount - 1) {
+      remainingWidth -= collapsedWidths[itemsCount - 1 - j];
+      j++;
+      if (remainingWidth >= 0) {
+        collapsed--;
+      }
+    }
+  }
+  return collapsed;
+};
+
+const optimizeMinWidth = (itemsWidths: Array<number>, navWidth: number | null): number => {
+  const collapsedWidths = itemsWidths.map(width => Math.min(width, defaultMinBreadcrumbWidth));
+  if (!navWidth) {
+    return defaultMinBreadcrumbWidth;
+  }
+  const itemsCount = collapsedWidths.length;
+  if (itemsCount > 2) {
+    const minCollapsedWidth = collapsedWidths[0] + ellipsisWidth + collapsedWidths[collapsedWidths.length - 1];
+    if (minCollapsedWidth > navWidth) {
+      return (navWidth - ellipsisWidth) / 2;
+    }
+  }
+  if (itemsCount === 2) {
+    const minCollapsedWidth = collapsedWidths[0] + collapsedWidths[1];
+    if (minCollapsedWidth > navWidth) {
+      return navWidth / 2;
+    }
+  }
+  if (itemsCount === 1) {
+    return Math.min(navWidth, collapsedWidths[0]);
+  }
+  return defaultMinBreadcrumbWidth;
+};