How do i set "nav-item active" in Blazor?

Question

I'm building an application using Blazor & Bootstrap. I want to use a standard bootstrap navbar. I can't figure out how to add the "active" class to the

tag selected.

This is my code:

The built in which is a blazor component changes the class for the automatically. But since i am using bootstrap navbar i need to add "active" to the class of the selected

.

This is how it should look like when the link is active:

 
    Home

user_1492496 · Answer

You could use the navigation manager:


    Home


@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" : "";
}

user_4353606 · Answer

You should be able to use a custom template to achieve this:


    
    My link description

Source

user_92526 · Answer

You can use the Bootstrap NavBar and Blazor's NavLink without having to add any additional code. The one caveat is that your "active" class will added to the tag, as per Bootstrap's documentation, and not on the

tag.

From the Bootstrap 5.x docs (the initial example for navbar):


  Home

With that in mind, the Blazor NavLink component replaces the tag:


    
         Home
        
    


    
        Reporting

Finally, once this is in place, you can add your own CSS to further modify the appearance:

.nav-link > hr {
    visibility: hidden;
    color: white;
    height: 2px;
    margin-top: 4px;
    margin-bottom: 0;
}

.nav-item .nav-link.active > hr {
    visibility: visible;
    filter: blur(1.5px);
}

No other code is needed.

In my example, a blurred line will appear under the active menu item, as seen below (note, additional HTML/CSS would be required to achieve the completed visual):

How do i set "nav-item active" in Blazor?

3 Answers