CODEWITHSUNDEEP
c#blazor
Berno
Berno

Reputation: 73

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

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 <li> tag selected.

This is my code:

<div class="collapse navbar-collapse">
    <ul class="navbar-nav">
        <li class="nav-item">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="/counter" Match="NavLinkMatch.All">Counter</NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="/fetchdata" Match="NavLinkMatch.All">Fetch data</NavLink>
        </li>
    </ul>
</div>

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

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

 <li class="nav-item active">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
 </li>

Upvotes: 7

Views: 11031

Answers (4)

Taylor Kelley
Taylor Kelley

Reputation: 1

You could also just use CSS.

<div class="nav-item">
  <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
    <DashboardIcon /><span>Home</span>
  </NavLink>
</div>

::deep .nav-item:has(a.active) {
    background-color: blue;
}

This prevents the need for a seperate c# function. Also use ::deep in CSS if you are using the code behind, so that Blazor knows to look at the NavLink for CSS styles

Upvotes: 0

SergioL
SergioL

Reputation: 4963

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 <a> tag, as per Bootstrap's documentation, and not on the <li> tag.

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

<li class="nav-item">
  <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>

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

<li class="nav-item">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="oi oi-home" aria-hidden="true"></span> Home
        <hr />
    </NavLink>
</li>
<li class="nav-item">
    <NavLink class="nav-link" href="/Reporting" Match="NavLinkMatch.All">
        Reporting
        <hr />
    </NavLink>
</li>

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):

Image of described technique

Upvotes: 1

Brian Parker
Brian Parker

Reputation: 14533

You could use the navigation manager:

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

Upvotes: 15

TheHvidsten
TheHvidsten

Reputation: 4428

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

<NavLink href="/myhref">
    <Template>
        <li class="@(context.isActive ? "active" : string.Empty)">
             <a href="@context.href">@context.content</a>
        </li>
    </Template>
    My link description
</NavLink>

Source

Upvotes: 2

Related Questions