Component

Overflow

Package version

9.3.6

React version

18.2.0

Environment

System:
    OS: macOS 14.6.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 62.82 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 136.0.7103.93
    Safari: 17.6
    Safari Technology Preview: 17.4

Current Behavior

When using the Overflow component in combination with the partitionBreadcrumbItems hook, and setting a limit (e.g., maximum 2 visible items), the overflow menu becomes visible even when no items have overflowed yet.

In this case, the calculation of the total occupied width in the Overflow component is incorrect — the width of the overflow menu is not included even though it's rendered and takes up space.

The problem appears to be in this function in @fluentui/priority-overflow/lib/overflowManager.js:

function occupiedSize() {
    const totalItemSize = visibleItemQueue.all().map((id)=>overflowItems[id].element).map(getOffsetSize).reduce((prev, current)=>prev + current, 0);
    const totalDividerSize = Object.entries(groupManager.groupVisibility()).reduce((acc, [id, state])=>acc + (state !== 'hidden' && overflowDividers[id] ? getOffsetSize(overflowDividers[id].element) : 0), 0);
    const overflowMenuSize = invisibleItemQueue.size() > 0 && overflowMenu ? getOffsetSize(overflowMenu) : 0;
    return totalItemSize + totalDividerSize + overflowMenuSize;
}

This logic only includes overflowMenuSize if invisibleItemQueue.size() > 0, but in cases where the menu is always visible (due to a pre-partitioned item list), the overflowMenu is present and visible from the start — even though invisibleItemQueue.size() is still 0.

As a result, the occupiedSize value underestimates the actual space used, which can lead to layout issues.

Expected Behavior

The occupiedSize() function should correctly account for the visible overflow menu whenever it is rendered, regardless of whether any items have overflowed.

Specifically:

If the overflow menu is visible (e.g., due to pre-partitioned items using partitionBreadcrumbItems), its width should always be included in the total occupied size.

This ensures the layout logic has an accurate measurement of the space being used, avoiding unexpected wrapping or layout shifts.

Reproduction

https://react.fluentui.dev/?path=/docs/components-breadcrumb--docs#breadcrumb-with-overflow

Steps to reproduce

1. Use the Overflow component together with partitionBreadcrumbItems, limiting the number of visible items (e.g., to 2).

2. Begin shrinking the width of the container.

3. Observe how Item 7 remains visible until less than approximately half of it is shown — at which point it is hidden and moved to the overflow menu.

4. This threshold corresponds to the width of the overflow menu button, which is not included in the layout calculation early on.

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.