Navigation links need better styling

[mxmason]

Summary

Several states of our navigation links need visual improvement:

1. the default state
2. the hover state
3. the current page state

Default state

A link should provide some kind of obvious visual clue to tell the user that it's a link. Right now, our navigation links look like plain text.

The user has to infer from context clues that these are links. They shouldn't have to do this.

Hover state

Right now, our navigation links stay the same when a user hovers on them. Some other design change, like a text underline, will make it clearer to the user that they’re interacting with a link.

Current page state

When users are interacting with a site navigation, they need some kind of indicator (or affordance) about which page they're on in that navigation. Right now, our Navigation component provides some affordance to assistive technology users through the use of aria-current, but there is no visual affordance for sighted users who are not using assistive technology.

We could style the current navigation element with some combination of color and shape to show the user that they're on that page.

Notes and inspiration from around the web

It's important that styles for our hover and current page states provide clear meaning both separately and together

In this screenshot from the UK Government Design System website, the "Components" page is the current page, and the user has hovered over the "Patterns" link. There is a blue bar beneath the area of the "Components" link to indicate that it is the current page, and the text of the "Patterns" link has been underlined and darkened to indicate that the user is hovering on it.

In this screenshot, "Components" is the current page and the user is also hovering over "Components". Notice how the visual cues for both hover and navigation remain visible, and do not interfere with each other.

💡 Note: The goal isn't necessarily to make out website look like this; it's to think about how we can create some styles that fill both of the gaps listed in this issue!

Relevant links

• Our Navigation component

[Terieyenike]

I'd like to work on this feature.