[SOLVED] Blazor Menu keeping Menu Highlight (Active) for Child Detail Page

Issue

I have a table with list of items on a "List Page". Then when you select "View Detail" link on a row it should show the detail of that row item in a child "Detail Page".

  • Home
  • ListPage (I want to keep this Active)
    • DetailPage (This is not on the Menu since it’s child page of ListPage)

List Page

Id Title Action
1 My Item 1 View Detail
2 My Item 2 View Detail

Currently my Blazor Menu looks like this:

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> @Loc["Home"]
        </NavLink>
    </div>

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="ListPage">
            <span class="oi oi-list-rich" aria-hidden="true"></span> @Loc["ListPage"]
        </NavLink>
    </div>

How do I keep the highlight of "List Page" on the menu when we go to the "View Detail" sub page in the table of List Page?

Solution

The default for <NavLink... does the this. It is the point of the Match parameter wich defaults to NavLinkMatch.Prefix if omitted. If your route is @page "/ListPage" then your child pages should use the route @page "/ListPage/{SomeParameter}" or similar. NavLink will then work as the route starts with "/ListPage".

NavLink Source Code

Answered By – Brian Parker

Answer Checked By – Senaida (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *