NavLink is a built-in Blazor component that renders a navigation link for a routed Razor component. It uses a URL rather than a component, page, or action name, changes the browser URL without a new HTTP request, and preserves application state during client-side navigation. section 10.1.3 section 35.2.3
Configure a NavLink with the attributes that control destination, appearance, and active matching:
- Set href to the URL handled by a component's @page directive, such as /depts or /people. section 35.2.3
- Use class for the normal CSS classes and ActiveClass for the classes applied when the target matches the current URL. section 10.1.3
- Set Match to NavLinkMatch.Prefix when a navigation item should remain active for the target path and its deeper routes. section 10.1.3
Administration navigation
A layout can keep Products selected across product-related routes while Blazor handles navigation without a full document reload:\n\n<NavLink class="btn btn-outline-primary"\n href="/admin/products"\n ActiveClass="btn-primary text-white"\n Match="NavLinkMatch.Prefix">\n Products\n</NavLink> section 10.1.3
Listing 10.5 The AdminLayout.razor File in the SportsStore/Pages/Admin Folder
@inherits LayoutComponentBase
<div class="bg-info text-white p-2">
<span class="navbar-brand ml-2">SPORTS STORE Administration</span>
</div>
<div class="container-fluid">
<div class="row p-2">
<div class="col-3">
<div class="d-grid gap-1">
<NavLink class="btn btn-outline-primary"
href="/admin/products"
ActiveClass="btn-primary text-white"
Match="NavLinkMatch.Prefix">
Products
</NavLink>
<NavLink class="btn btn-outline-primary"
href="/admin/orders"
ActiveClass="btn-primary text-white"
Match="NavLinkMatch.Prefix">
Orders
</NavLink>
</div>
</div>
<div class="col">
@Body
</div>
</div>
</div>
Inspect the complete administration layout to see paired Products and Orders NavLink elements, Bootstrap classes, active styling, and prefix matching in context. section 10.1.3
