[Bug]: Nav items with wrapped text break height calculation of submenues

[stefan-schweiger]

Component

Nav (Preview)

Package version

9.72.7

React version

19.2.1

Environment

System:
    OS: macOS 15.6.1
    CPU: (16) arm64 Apple M4 Max
    Memory: 131.31 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 142.0.7444.176
    Edge: 142.0.3595.94
    Safari: 18.6
  npmPackages:
    @fluentui/react-components: ^9.72.7 => 9.72.7 
    @fluentui/react-datepicker-compat: ^0.6.20 => 0.6.20 
    @fluentui/react-icons: ^2.0.315 => 2.0.315
    @fluentui/react-timepicker-compat: ^0.4.25 => 0.4.25 
    @types/react: ^19.2.7 => 19.2.7 
    @types/react-dom: ^19.2.3 => 19.2.3 
    react: ^19.2.1 => 19.2.1 
    react-dom: ^19.2.1 => 19.2.1

Current Behavior

When you have items in the navigation that wrap their text it breaks the height calculation of submenus.

For example in the reproduction you can see that one item is cut off in the middle and the next item is not even show at all:

Expected Behavior

Navigation items with a long text should be handled correctly

Reproduction

https://stackblitz.com/edit/rnpocq8g?file=src%2Fexample.tsx

Steps to reproduce

1. Open "Retirement" menu point

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

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.

[stefan-schweiger]

You can see that the calculation here just assumes a static item size of 40px (if not compact)

https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-nav/library/src/components/NavSubItemGroup/useNavSubItemGroup.ts

[dmytrokirpa]

Hey @stefan-schweiger, appreciate you flagging the issue!

I can confirm the problem - it’s due to the fixed height set in the motion component here: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-nav/library/src/components/NavSubItemGroup/useNavSubItemGroup.ts#L31.

The good news is it’s just a style thing, so you can tweak it on your end for now. Here’s an example to help you out: https://stackblitz.com/edit/rnpocq8g-2hpe8t7x?file=src%2Fexample.tsx

Assigning this to the code owners for a proper fix.