fix: FluentNavGroup child menu not showing consistently when navmenu collapsed in Blazor Web App

[Ranjith0333]

🐞 Bug Report: FluentNavMenu / FluentNavGroup Expanded and Child Navigation Behavior in Blazor Web App

Component

Microsoft.FluentUI.AspNetCore.Components

---

✅ Expected Behavior

When using FluentNavMenu with FluentNavGroup:

• If EnableChildNavigation="true" (or CollapsedChildNavigation="true"), child nav items should appear in a popup when the nav menu is collapsed.
• If EnableChildNavigation="false", clicking a group should automatically expand the whole nav menu and display the group’s child links when collapsed.
• @bind-Expanded should reliably reflect the current state (expanded/collapsed) of the nav menu.
• The ExpandedChanged event should fire whenever the nav menu state changes.
• Behavior should be consistent between Blazor Server App and Blazor Web App.

---

❌ Actual Behavior

• With EnableChildNavigation="true" and @bind-Expanded="false" initially:

  • The nav menu is stuck in collapsed state.
  • Clicking nav groups only shows the popup once; the menu cannot expand again.

• With EnableChildNavigation="true" and @bind-Expanded="true" initially:

  • The nav menu can toggle between expanded ↔ collapsed.
  • But child nav popup behavior is broken — child items do not reliably appear.

• @bind-Expanded does not update correctly to reflect the real expanded/collapsed state.

• The ExpandedChanged event does not trigger when the nav menu state changes.

• Same markup works fine in Blazor Server App, but fails in Blazor Web App (server interactivity).

---

🔦 Context

• This issue arises while using FluentNavMenu and FluentNavGroup components from
  Microsoft.FluentUI.AspNetCore.Components inside a .NET 8 Blazor Web App with
  InteractiveServerRenderMode.

• The same markup behaves correctly in the legacy Blazor Server App,
  but fails in the new Blazor Web App template.

• The problem specifically impacts child navigation popups from group menu when EnableChildNavigation enabled and collapsed/expanded behavior
  when binding with @bind-Expanded or handling ExpandedChanged.

---

Environment

• Framework: .NET 8 Blazor Web App
• Render mode: InteractiveServerRenderMode
• Works correctly in: Blazor Server App (legacy template)
• Fails in: Blazor Web App (new template)
• OS: Windows PC

🔄 Repro Steps

1. Create a Blazor Web App with InteractiveServerRenderMode.
2. Add a FluentNavMenu with a FluentNavGroup (see code sample).
3. Run the app.
4. Change Expanded to true and observe the menu state.
5. Collapse the menu, then click on the NavGroup header to try expanding it.
6. Check whether:
   • @bind-Expanded reflects the actual expanded/collapsed state.
   • OnExpandChanged triggers when the group is toggled.
   • onclick works in the FluentNavGroup.
7. Compare behavior with a Blazor Server app, where child navigation expands/collapses correctly.

##Observe:

• @bind-Expanded does not match actual menu state & OnExpandChanged is never triggered in fluent nav menu.

• onclick is also not triggered in fluent nav group

• Popup/child navigation behavior differs from Blazor Server.

<FluentNavMenu @bind-Expanded="@Expanded" 
               CollapsedChildNavigation="@EnableCollapsedChildNavigation"
               Width="250"
               Collapsible="false"
               Title="Collapsible demo"
               Style="font-size:14px;color:var(--accent-base-color) !important;
                      height:90vh;border-right: 1px solid rgba(0, 0, 0, 0.1); ">

    <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())" Tooltip="Home" href="/item1">Item1</FluentNavLink>
    <FluentNavLink Icon="@(new Icons.Regular.Size24.DesktopMac())" Tooltip="Item2" href="/item2">Item2</FluentNavLink>
    <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarPlay())" Tooltip="Item3" href="/item3">Item3</FluentNavLink>

    <FluentNavGroup Icon="@(new Icons.Regular.Size24.Window())" Title="Item4" Tooltip="Item4">
        <FluentNavLink Icon="@(new Icons.Regular.Size24.WindowAd())" Tooltip="Item4.1" href="/item4.1">Item4.1</FluentNavLink>
        <FluentNavLink Icon="@(new Icons.Regular.Size24.DesktopToolbox())" Tooltip="Item4.2" href="/item4.2">Item4.2</FluentNavLink>
    </FluentNavGroup>

</FluentNavMenu>

@code {
    private bool Expanded { get; set; } = false;
    private bool EnableCollapsedChildNavigation { get; set; } = true;
}

[vnbaaij]

✅ Expected Behavior

When using FluentNavMenu with FluentNavGroup:

• If EnableChildNavigation="true" (or CollapsedChildNavigation="true"), child nav items should appear in a popup when the nav menu is collapsed.

No, that is not how this NavMenu has been designed. A popup will only be shown for child items that have child items themselves. See the images below and the example on the demo site

• If EnableChildNavigation="false", clicking a group should automatically expand the whole nav menu and display the group’s child links when collapsed.

We do not have an EnableChildNavigation parameter in the NavMenu components. I don't know what you mean with that, but I do know the bhavior as shown in the examples on the demo site is how we want it to operate..

• @bind-Expanded should reliably reflect the current state (expanded/collapsed) of the nav menu.
• The ExpandedChanged event should fire whenever the nav menu state changes.
• Behavior should be consistent between Blazor Server App and Blazor Web App.

Unable to reproduce this

[coderdnewbie]

I am seeing the same issue with the popup not being displayed. It is reproduced in https://github.com/coderdnewbie/FluentUITailwind4Demo. I cannot get the popup to work when the sidebar is collapsed. The navigation code is in NavMenu.razor, but I could not solve it.

I think that I am having the same issue as well.

I also copied the code from the example (the Collapsible navigation section) into NavMenu.razor and it does not show the popup either.

I hope this information helps.

[coderdnewbie]

I found out why mine was not working (see above comment). It was due to my App.razor having @rendermode="new InteractiveServerRenderMode(prerender: false)" which did not work, but @rendermode="new InteractiveServerRenderMode(prerender: true)" does work, and the popup appears.

Is this correct behavior?

I have updated FluentUITailwind4Demo to work around this issue, but am surprised that prerender needs to be true.

[vnbaaij]

It should work without prerendering as well

[vnbaaij]

Closing this due to inactivity from original requestor