Pointer Events & Disabling Current Page Links

Chris Coyier //

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the "current" page, if it is present in the navigation. I think those are great standards. The logo-link thing is so ubiquitous that your users will likely automatically try it if you've coded it that way or not. The current navigation thing is just good ol' horse-sense for grounding a users and making them feel good about their current location in a websites hierarchy.

But here is another good design standard: don't have links to the same page you are on, on that page.

The idea here is twofold:

  1. When you see a link, it looks like a link, it behaves like a link, that says "click this and be taken elsewhere." If the link takes you back to the same page you are on, that's kinda weird.
  2. It is a waste of server resources to reload a page for no reason.

How can you accomplish this without a bunch of development work and changing markup? CSS of course!


"Disabled" navigation from a quick demo.

The big idea here is that you can tell a link not to behave like a link (do nothing when clicked) using the pointer-events CSS property.

Body has a unique ID at the homepage:

<body id="home">

Navigation has a matching class name:

<nav>
    <ul>
       <li class="home"><a href="#">Home</a></li>
       <li class="about"><a href="#">About</a></li>
       <li class="clients"><a href="#">Clients</a></li>
       <li class="contact"><a href="#">Contact Us</a></li>
    </ul>
</nav>

Navigation for home is deactivated only on homepage:

#home nav .home > a {
       pointer-events: none;
       cursor: default;
}

Wow that was easy, eh? This works in Firefox 3.6+, Safari 3+, and the latest Chrome versions (v5+?). Nothing from Opera or IE yet. But hey, that's pretty sweet for such a little development investment.

Part of the trick to getting this to work is getting an ID or a class on the body you can work with. If that is a new idea to you, check out this article and this screencast for the basic idea. Also know that a CMS like WordPress has a body_class(); function which does a great job of providing all the class names you could ever want on the body.

Thanks to Ant Gray for the idea!