[Feature]: Differentiate between parent and exact pages in NavLink

[hpohlmeyer]

What is the new or updated feature that you are suggesting?

Currently NavLink applies aria-current="page" to links that match the route, no matter if it is an exact match or not. It would be nice, to differentiate between a "parent" page and the current page.

There are several ways to solve this:

• Limit aria-current="page" to the current page and use aria-current="true" for parent pages
• Add a second class to active to differentiate between the two pages
• Add more information on the NavLink render function

Maybe doing all of it also makes sense.

Why should this feature be included?

Sometimes the index route and a subroute are mutually exclusive. Imagine a layout that shows a table of data.

• /food: Display all food
• /food/sweet: Show only sweet food
• /food/savoury: Show only savoury food

If you use [aria-current="page"] to style your current selection, and go to /food/sweet, both /food and /food/sweet are marked as active.

---

This example illustrates why a differentiaton would be nice:

• First navigation level
  • highlight the selected link if it matches a parent route of the active route
  • highlight the selected link if it matches the active route
  • After this feature is implemented the styling could be achieved with [aria-current]
• Second navigation level
  • Do not highlight the selected link if it matches a parent route of the active route
  • highlight the selected link if it matches the active route
  • After this feature is implemented the styling could be achieved with [aria-current="page"]

[hpohlmeyer]

I did just realize, that you can do the visual part of this feature by using the end prop of the NavLink, but that removes the active class and the [aria-current] attribute.

I am still interested if you think it would be beneficial to mark parent pages with [aria-current="true"] instead of [aria-current="page"] to differentiate between current and parent pages.

[mycroes]

It seems to me the underlying behavior is missing entirely in v6, regardless of whether it applies to NavLink or getting the matched path by hooks. The latter was absolutely necessary in v5 to build links relative to the current location, but I'm unable to replicate this in v6 (as in, getting the matched location, relative links work OOTB of course).

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!