ActiveTagHelper 1.1.0

dotnet add package ActiveTagHelper --version 1.1.0
NuGet\Install-Package ActiveTagHelper -Version 1.1.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="ActiveTagHelper" Version="1.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add ActiveTagHelper --version 1.1.0
#r "nuget: ActiveTagHelper, 1.1.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install ActiveTagHelper as a Cake Addin
#addin nuget:?package=ActiveTagHelper&version=1.1.0

// Install ActiveTagHelper as a Cake Tool
#tool nuget:?package=ActiveTagHelper&version=1.1.0

ActiveTagHelper

Adds active class to your links (like menu items, or a tags, but it actually works on every tag) based on whether its asp-page, asp-controller or asp-action matches the current URL.

It's easy – just add a little attribute to your links. This is how:

Compatibility

Currently only tested on .NET 6.

Installation

  1. Add a reference to the package from the cmd line:
    MyProject> dotnet add package ActiveTagHelper
    
  2. Restore:
    MyProject> dotnet restore
    
  3. Register the Tag Helpers in your application's _ViewImports.cshtml file:
    @addTagHelper *, ActiveTagHelper
    

To use it, you have two possibilities:

Every link that should have its destination and current route compared needs to get the check-active attribute.

Example

<a check-active asp-page="/Index">Index</a>
<a check-active asp-page="/Privacy">Privacy</a>

When the user is on the Index page, the code gets automatically changed to:

<a class="active" asp-page="/Index">Index</a>
<a asp-page="/Privacy">Privacy</a>

If there are already classes defined, active just gets appended to the existing ones. The check-active attribute always gets removed.

By the way, this works on every HTML element, not just <a>.

Set custom trigger css class instead of check-active attribute

You can also use a css class as a trigger. For example, here we use a class nav-link as a trigger class, because we already have it as a distinguishing feature of navigation links. Thus, we can leave out the check-active attribute and leverage that class. Set it up in your Program.cs where you create your builder:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();

builder.MapActiveTagHelperClass(o => o.TriggerClass = "nav-link"); // <- this is us!

var app = builder.Build();
// […]

Example

<a class="nav-link" asp-page="/Index">Index</a>
<a class="nav-link" asp-page="/Privacy">Privacy</a>

When the user is on the Index page, the code gets automatically changed to:

<a class="nav-link active" asp-page="/Index">Index</a>
<a class="nav-link" asp-page="/Privacy">Privacy</a>

Optional: set custom active class

You can change the name of the active CSS class by setting a custom class in your host builder setup. The tag exposes a MapActiveTagHelperClass method in the WebApplicationBuilder object.

For example:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();

builder.MapActiveTagHelperClass(o => o.CssClass = "my-custom-class"); // <-- this sets your own class

var app = builder.Build();
// […]

Changelog

1.0.0

Initial

1.0.1

Added support for custom css class

1.1.0

Added possibility to have custom css class as trigger instead of attribute

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net6.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.1.0 544 2/1/2022
1.0.1 266 1/10/2022
1.0.0 260 1/6/2022