0

I'm working on a two page website. At the top there are two links. One for work and one for info.

What's the best practice for styling a link for the page the user is on?

For example, on the below example the user is on the project page. Do you think having the active link a darker colour best represents this or should it be the other way round?

enter image description here

Improve this question
2
  • 1
    Is the "Projects" link still clickable?
    – msp
    Jun 23, 2014 at 14:31
  • Not when you're on the projects page. The image above is suppose to suggest that you are on the projects page. I'm unsure if this comes across. Maybe that should be white and info should be duller?
    – user2898276
    Jun 23, 2014 at 14:56

1 Answer 1

Reset to default
0

I wouldn't rely solely on color to indicate state. There are various reasons why this is not best practice, such as color blindness.

I would recommend adding more visual cues to indicate the state of the link.

If the item when in a selected state is not clickable, then remove the underline. Underlines have traditionally meant that the text can clicked. Removing that would would correctly show that the text can't be clicked on, while also creating a clear visual distinction with the other link.

Other visual cues you could consider:

  • Increase the thickness of the underline so that the selected item stands out
  • Increase the font weight of the selected item
  • Invert the colors of the selected item so that the background and foreground stand out
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.