[dev-v5][Nav] Refactoring and fix issue#4550
Merged
Conversation
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
|
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors FluentNav navigation components to centralize active-state logic and fix incorrect/duplicate active highlighting (Issue #4530) by updating active states on route changes.
Changes:
- Introduces
FluentNavBaseto share nav item/category logic (Owner cascade, match logic, disposal/unregister). - Adds item registration in
FluentNavand updates registered items onNavigationManager.LocationChanged. - Tweaks expand/collapse animation behavior (TS) and simplifies active indicator CSS.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Components/Nav/FluentNavBase.cs | New shared base class for nav items/categories (match + ownership + disposal). |
| src/Core/Components/Nav/FluentNav.razor.cs | Tracks registered FluentNavBase items and updates active state on route changes. |
| src/Core/Components/Nav/FluentNavItem.razor.cs | Moves active tracking to UpdateActiveState and registers with FluentNav. |
| src/Core/Components/Nav/FluentNavItem.razor | Updates component inheritance to FluentNavBase. |
| src/Core/Components/Nav/FluentNavCategory.razor.cs | Adopts base class + active-state update pattern changes during expand/collapse. |
| src/Core/Components/Nav/FluentNavCategory.razor | Updates component inheritance to FluentNavBase. |
| src/Core/Components/Nav/FluentNav.razor.ts | Adjusts animation duration/keyframes and overflow handling. |
| src/Core/Components/Nav/FluentNav.razor.css | Removes active indicator animation properties. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
dvoituron
requested changes
Feb 20, 2026
Closed
10 tasks
Contributor
10 tasks
Contributor
…#4552) * Initial plan * Optimize UpdateActiveState to avoid redundant renders during expand/collapse Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com> * Remove accidentally committed build artifact from Core.Scripts/obj Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>
dvoituron
approved these changes
Feb 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix #4530
This pull request introduces a significant refactor to the FluentNav navigation components, focusing on improving navigation state management, active state tracking, and code structure. The key changes include the introduction of a new
FluentNavBaseabstract class for shared navigation logic, enhanced active state updates based on navigation events, and improvements to the animation and style logic.Key changes:
Navigation State Management & Active State Handling
FluentNavBaseto encapsulate shared logic for navigation items and categories, including active state calculation and disposal patterns. This allows bothFluentNavItemandFluentNavCategoryto inherit consistent navigation behavior and state management. [1] [2] [3]FluentNav,FluentNavCategory, andFluentNavItemto inherit fromFluentNavBaseinstead ofFluentComponentBase, removing redundant code and centralizing active state logic. [1] [2] [3] [4]FluentNavBase) withinFluentNav, enabling the nav component to track all items and update their active state in response to navigation changes. [1] [2]NavigationManager.LocationChangedinFluentNavto automatically update the active state of all registered navigation items when the route changes. Proper event unsubscription is handled inDisposeAsync. [1] [2]Component Lifecycle & State Updates
FluentNavCategoryandFluentNavItemto use the new active state update logic, ensuring UI reflects navigation changes immediately and correctly. TheUpdateActiveStatemethod is now invoked with the current location and triggers UI updates only when the active state actually changes. [1] [2]FluentNavCategoryandFluentNavItemnow that these are handled by the base class. [1] [2]Animation and Style Improvements
FluentNav.razor.tsfor smoother expand/collapse transitions. [1] [2] [3]FluentNav.razor.cssto simplify and clean up the stylesheet.References:
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18]