cfpb/design-system

Visual indicator/styling for current page

natalia-fitzgerald opened this issue · 0 comments

@sonnakim
In the Design System docs site I noticed that we don't have a link styling change or visual indicator to indicate to a user that they are on a certain page. I looked on our website left navigation and there the link turns black and the vertical line shows up when a user is on the particular page. Something like this (even if it's just the black link text as a temporary fix) could help provide some visual distinction on the CFPB Design System pages as well.

Top level nav Secondary level nav
Screenshot 2023-11-07 at 7 27 02 AM Screenshot 2023-11-07 at 7 27 06 AM

Here are some mock-ups of what we have, versus a change to black, versus a change to the full link styling from our left navigation styling on the website.

Current implementation Selected state: Link turns black Selected state: Link turns black and vertical line
Screenshot 2023-11-07 at 7 58 20 AM Screenshot 2023-11-07 at 7 58 27 AM Screenshot 2023-11-07 at 7 58 33 AM
Current implementation Selected state: Link turns black Selected state: Link turns black and vertical line
Screenshot 2023-11-07 at 7 57 58 AM Screenshot 2023-11-07 at 7 58 06 AM Screenshot 2023-11-07 at 7 58 13 AM

@sonnakim for awareness