Breaking News: Grepper is joining You.com. Read the official announcement!

navbar change active class link blazor

Concerned Crocodile answered on November 4, 2021 Popularity 3/10 Helpfulness 8/10

answer navbar change active class link blazor

navbar change active class link blazor

Comment

<li class="nav-item @GetActive("", NavLinkMatch.All)">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
</li>

@code {

    [Inject]
    NavigationManager NavigationManager { get; set; }

    protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();

    bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)
    {
        var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();
        return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());
    }

    string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? "active" : "";
}

Popularity 3/10 Helpfulness 8/10 Language whatever

Source: stackoverflow.com

Tags: blazor class navbar whatever

Link to this answer
Share Copy Link

Contributed on Nov 04 2021

Concerned Crocodile

0 Answers Avg Quality 2/10

navbar change active class link blazor

Contents

More Related Answers

navbar change active class link blazor

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.