Understanding NavLink in Blazor

Introduction

Alright, hold on to your hats, folks, because we're about to dive into the exciting world of NavLink in Blazor! NavLink provides dynamic navigation functionality for client-side routing. It provides a way to generate links to different pages within the application and allows users to navigate between pages without a full page refresh. NavLink is a higher-level component that internally uses NavigationManager and simplifies the process of creating navigation links.

I have previously covered the concepts of routing and NavigationManager. If you refer to these two chapters, 1. Routing, 2. NavigatonManager, you will gain a better understanding of navigation in Blazor.

The Anchor <a> tag

The <a> tag in HTML stands for "anchor" and is used to create hyperlinks. It is used to link to other web pages. The syntax of <a> is as follows:

<a href="https://www.c-sharpcorner.com/">C# Corner</a>

Here, the href attribute is used to specify the URL of the resource you want to link to, which is, in this case, "C#Corner's homepage". The link text is the text that will be displayed on the page as the hyperlink, which is "C# Corner" in this example. When a user clicks on the hyperlink, the web browser will navigate to the C#Corner's homepage.

NavLink

The NavLink component in Blazor is similar to the Anchor tag above, with additional functionality for client-side navigation. When a NavLink is clicked, it checks if the URL matches the current route and uses CSS to provide a visual cue to the user.

Here's the syntax of NavLink.

<NavLink href="/counter">Counter</NavLink>

In this example, the href attribute specifies the URL of the target page, which in this case is the "Counter" page. When the user clicks on the NavLink component, It will navigate to the "Counter" page.

Let's debug NavMenu component that comes along with your Blazor project. Right in the middle of component you'll find this code.

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

Listing 1: NavMenu.razor: HTML

Listing 1 renders a navigation menu with links: Home, Counter, and Fetch data. The topmost div has the @NavMenuCssClass CSS class. The value of @NavMenuCssClass is either "collapse" or null depending on the value of the collapseNavMenu field set from the code behind. collapseNavMenu is a boolean property used to show or hide the menu items. The value of this property is changed by an onclick-event which triggers the ToggleNavMenu() method in listing 2.

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Listing 2: NavMenu.razor: C#

 <NavLink class="nav-link" href="counter" Match="NavLinkMatch.All"> Counter </NavLink>

Each menu item is defined using the NavLink component, which generates an anchor tag with additional navigation features. The href attribute specifies the URL of the target page, and the Match attribute is the enum that determines how the link should be considered active.

There are two values for the NavLinkMatch enumeration:

NavLinkMatch.Prefix: With this value, the link is considered active if the current URL starts with the specified value. For example, if the NavLink is set to "/about", the link is active for URLs like "/about" or "/about/contact".
NavLinkMatch.All: This value indicates that the link is considered active only if the current URL matches the specified value exactly. For example, if the NavLink is set to "/about", the link is active only for the URL "/about".

Once the application is executed, you will see the following output: The sidebar is the NavMenu component that displays a list of three pages, as mentioned earlier. The selection of each item manages to show and hide each page because of the value of NavMenuCssClass.

Figure 1: Output of NavLink component

Nesting NavLinks with other HTML tags

<ul>
    <li><NavLink href="/">Home</NavLink></li>
    <li><NavLink href="/pageone">Page 1</NavLink></li>
    <li>
        <NavLink href="/pagetwo">Page 2</NavLink>
        <ul>
            <li><NavLink href="/pagetwo/a">PageTwo - A </NavLink></li>
            <li><NavLink href="/pagetwo/b">PageTwo - B </NavLink></li>
        </ul>
    </li>
</ul>

Listing 3: Nesting NavLinks with ul and li tags

Listing 3 has an unordered list (ul) with three list items (li). Each list item contains a NavLink component. The first list item has a NavLink with a href attribute value of "/", which means it will redirect to the homepage. The second list item has a NavLink with a href attribute value of "/pageone". The third list item has a NavLink with a href attribute value of "/pagetwo". Additionally, this list item contains another unordered list (ul) with two list items (li) that have NavLinks as well. These NavLinks will link to child pages of pagetwo with the URLs "/pagetwo/a" and "/pagetwo/b" respectively.

For demonstration purpose, I am adding this code under Counter.razor page.

Figure 2: Custom NavLinks

Conclusion

We learned how the NavLink component generates an anchor tag with additional navigation features, such as highlighting active links based on the current URL. The NavLinkMatch enumeration specifies how the NavLink component should match the URL to determine whether a link is active. Later we saw how to map NavLinks with other HTML tags. Now we know when and how to use NavLinks.