NavMenu v3 select item based on Url

[miantosca]

I am having trouble with getting the NavMenu to select the current item unless I click on the item. If I link to a page that matches a NavItem's Href it does not select it.

Based on the v3 source code for the NavMenu it should support this out of the box. Am I missing something or do I need to hook this up to make it work.

The source code I am looking at is here: https://github.com/microsoft/fluentui-blazor/blob/f6ef9cd6398ad7bbf5a526e15a5669dd5b2b1617/src/Core/Components/NavMenu/FluentNavMenu.razor.cs

thank you
Michael

[Narvalex]

It did not worked for me either. I handled this by listening to navigation events and then notifying to a service that will be responsible to let the nav know what item in the menu should be marked as selected. The following snippet might be helpful:

<Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="@lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
        <Navigating>
            <!-- Lazy loading... -->
            <div>
                <p>The requested page is loading...</p>
            </div>
        </Navigating>
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            @*Not sure if we will need this
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />*@
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
</Router>

@code {
	private Task OnNavigateAsync(NavigationContext args)
	{
		// notify to a custom service that the path has changed
		// navMenuService.NotifyPathHasChanged(args.Path);
	}
}

[miantosca]

Thank you - I assume you are injecting the service into your NavMenu. How are you selecting an item in the menu?

[Narvalex]

Each of my menu items model has a boolean Selected property

public class MenuItem
{
    public MenuItem(Icon icon, string text, string href, bool selected = false)
    {
        this.Icon = icon;
        this.Text = text;
        this.Href = href;
        this.Selected = selected;
    }

    public Icon Icon { get; }
    public string Text { get; }
    public string Href { get; }
    public bool Selected { get; set; }
}

In the service I just compare the NavigationContext.Path prop with every MenuItem and mark Selected accordingly.
In the NavMenu the implementation is straightforward;

 <FluentNavMenu>
        @foreach (var menu in this.menuItems)
        {
            <FluentNavMenuLink Icon="@menu.Icon" Text="@menu.Text" Href="@menu.Href" @bind-Selected="@menu.Selected" />
        }
    </FluentNavMenu>