Skip to content

NavLink should have a core set of classes and inactive ones rather than just tacking on "Active" ones. #37765

@thalaeg

Description

@thalaeg

Currently the NavLink (https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Routing/NavLink.cs) has a property called "ActiveClass". It should also have a property named "InactiveClass" so you can have a "core set" and then your inactive and active classes.

Here is an example.
Say I have a link that would look like this when inactive

<a class="text-gray bg-dark-gray" />

But when active I want it to look like

<a class="text-white bg-dark-gray" />

In other words, I would like to change the color of the text depending if it is active or not. I am proposing the following look of component.

<NavLink class="bg-dark-gray" ActiveClass="text-white" InactiveClass="text-gray" />

This is easily acomplishable by the following changes to NavLink.

  1. Adding a parameter
    image
  2. changing UpdateCssClass
    image

This does NOT break any current functionality as people would likely just be tacking on the classes to the end.
The issue with taking them on at the end is if you are using a CSS file, order matters within that for application.

I am happy to make a PR with this small change, that can help the NavLink be better!

Doesn't look any tests (that are currently written) are applicable to this. So only the component would need to be changed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor ComponentsenhancementThis issue represents an ask for new feature or an enhancement to an existing onefeature-blazor-builtin-componentsFeatures related to the built in components we ship or could ship in the futurehelp wantedUp for grabs. We would accept a PR to help resolve this issue
    No fields configured for Feature.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions