Building a menu for staff members I encountered a need to keep the url on the page but make it temporarily unavailable.

I could simply remove <a>, but at the same time I or the rest of the staff could need this link in the future. It was a sort of a sitemap just for us.

Solution

So there are several options, but each need to satisfied two conditions:

• Condition 1: Url itself must remain on page
• Condition 2: The link cannot be pressed on
• Condition 3: It must be easily reversible to ‘active’ state

Option 1 – Remove <a> alltogether

Block content

• Condition 1 is not satisfied – not url to be found
• Condition 2 is satisfied
• Condition 3 is not satisfied – not url to be found

Option 2 – href=”javascript:void(0)”

<a href="javascript:void(0)" style="cursor: default;">Block Content</a>

• Condition 1 is not satisfied
• Condition 2 is not satisfied – kind of 50/50, because you also need to remove underlining on hover
• Condition 3 is not satisfied

Option 3 – pointer-events: none;

<a href="/kek" style="pointer-events: none; cursor: default;">Block content</a>

• Condition 1 is satisfied
• Condition 2 is satisfied
• Condition 3 is satisfied

Conclusion

So, the third options is preferable for me.

Reference

• https://stackoverflow.com/questions/13955667/