[Feature Request]: Active links in TopNavigation

[asenousy]

Description

It is very common to navigate the website using the top navigation bar and to have it highlight the current page you are in. just like in your website https://cloudscape.design

it would be great if the TopNavigation Component offers this capability, thanks

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[rubencarvalho]

Hello! Thank you for reaching out.

According to our Service navigation pattern, we do not recommend our Top Navigation component to be used for structural navigation. We recommend that the side navigation should house the structural navigation and should be organized to best support the information architecture (IA) of the service, the user’s primary use cases, and the mental modal of the involved resources.

There are no particular plans for this request, however we will leave this issue open for visibility and for gathering further feedback.

[dpitcock]

• 1 for this. I dove into the code for both the package and the design system. A class like "website-navigation-link-active" can be added to the utility links that are not menu-dropdown, with a prop of isActive to be passed into the utility or an activeHref path to be added to the TopNavigation component. We have a micro-frontend site consisting of multiple teams using the same UI. The side navigation is where all the structual navigation is, however the links at the top provide some context as to where the user is on the site.

Having the design in component library website is a perfect example of a use case other customers might be looking for.