Sergey-link active class on two different links

[theedigerati]

When I click the navigation link to blog page, the active class is still on the e-commerce navigation link which is the index page link.
<sergey-link to="/pages/dashboards/blog.html" class="custom-nav-dropdown-item">Blog</sergey-link> <sergey-link to="/pages/dashboards/school.html" class="custom-nav-dropdown-item">School</sergey-link> <sergey-link to="/index.html" class="custom-nav-dropdown-item">E-commerce</sergey-link>

[nevanscott]

Is aria-current="page" only showing on the Blog link? If so then it’s currently working as intended, and you could change the way that link looks using an attribute selector in your CSS, something like:

[aria-current="page"] {
    font-weight: bold;
}

Does this cover your use case?

If so, perhaps the documentation could be more explicit about how this works.

If not, I’d be willing to discuss other ways this feature could work to be more fitting to expectations and needs.

(Note: as designed, the active class is added also to parent links, as a way to also allow styling of more complicated nested navigation structures.)

[theedigerati]

Yeah thanks a lot. I initially was styling the active link based on the active class. It'll be better to style based on the aria-current attribute. Though the active class still shows on two different links which are siblings and that shouldn't be. What I did was use JS to remove the active class from the links that do not have the aria-current attribute and it solved my problem because other interactions as well were dependent on the link with an active class.