Disable Links with an Empty href Attribute

Occasionally, there is a need to create a link that doesn’t actually go anywhere. A great example of this is a top-level menu item that displays a drop-down of sub-menu items. In this use case, you simply want a menu item that serves as a container for other menu items, but isn’t meant to take the user anywhere when clicked. So, it is common practice to use the # (hash) symbol as the href attribute. The reason for this is so that the page doesn’t reload, since the hash symbol is used for in-page links. However, clicking the link would add a fragment to the URL in the browser’s address bar. ¬†While this isn’t really desired, it is often seen as an acceptable side-effect.

One way to avoid this is to add some boilerplate jQuery code that will make sure that these ’empty’ href attributes don’t actually do anything:

The beauty of this approach is that you can now use the # symbol in any link knowing that it will prevent this default functionality.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.