-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Navigation links need better styling #31
Comments
I'd like to work on this feature. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
Several states of our navigation links need visual improvement:
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
The text was updated successfully, but these errors were encountered: