All FluentNavGroups are always selected

[simonunivonix]

I added some FluentNavGroups to the default NavMenu from the template as follows. However the first navlink and all the navgroups always remain selected. How can I set the menu up so that only the selected navlink is highlighted. Relevant code at the end

<nav class="sitenav" aria-labelledby="main-menu">
    <FluentDesignTheme OfficeColor="OfficeColor.Teams" />
    <FluentNavMenu Id="main-menu" Collapsible="true" CollapsedChildNavigation="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
        <FluentNavLink Href="/" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent"> Dashboard</FluentNavLink>
        <FluentNavGroup Href="/" Icon="@(new Icons.Regular.Size20.PeopleTeam())" IconColor="Color.Accent" Title="Teams" OnClick="OnClick" CustomToggleId="expand-collapse-button">
            <FluentNavLink Href="manageteams" > Manage Teams</FluentNavLink>
        </FluentNavGroup>
        <FluentNavGroup Href="/" Icon="@(new Icons.Regular.Size20.People())" IconColor="Color.Accent" Title="Users" OnClick="OnClick">
            <FluentNavLink Href="users"  > Manage Users</FluentNavLink>
            <FluentNavLink Href="guestaccess" > Guest Access</FluentNavLink>
            <FluentNavLink Href="externalaccess" > External Access</FluentNavLink>
        </FluentNavGroup>
        <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
        <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
    </FluentNavMenu>
</nav>

[vnbaaij]

There are a lot of links that go to '/'. They will all get selected if you do not change the default Match behavior per item.

Take a look at the examples in the demo site. They show what you need to set.

Regardless of that, all links to '/' get active state if you navigate to your '/' page.

[simonunivonix]

Thanks for the quick response.
That seems to have solved it.
However, it turns out that even if you only have 1 FluentNavLink linking to '/' it will always remain selected.
I gave every link its own page and now when I load the page the default home FluentNavLink is not selected.
Is it possible to select a default FluentNavLink?

[vnbaaij]

Did you add a Match criteria parameter?

Default should be the page you are viewing/visiting (ie which url is a match)

[simonunivonix]

Thanks again, that did it.