Hoverless Current Links

Good information architecture is more than drawing boxes and arrows in a logical manner. IA relies the experience of interaction designers to let the user know accurately and succinctly where they are in the context of the entire site, and where they can go from there.

Hierarchical navigation, dropdown menus, breadcrumb trails, "You are here" banners, and clickable logos are all examples of interaction design techniques which attempt to aid the user in traversing the website. Good IA means nothing if the user is confused.

The Technique

Breadcrumb trails and site navigation are my bread and butter (no pun intended). If I can get the logo and the nav to look and work perfectly, then 70% of the site's design is done. From there it's all downhill. One of my biggest pet peeves involves the "current" state of where you are in the site — how the link that signifies your current position lights up when you rollover it. But you click it, and it just reloads the same page. I'm going to show a way that I try to get around that, and make it so that users are slightly less confused (always a good thing).

The navigation on BusinessLogs is very straight-forward — at no time do you not realize where you are in the context of the entire site. If you are viewing the services page, the word "Services" turns to orange in the main nav. When you hover over it, your mouse pointer doesn't turn to a hand cursor, even though that is still a link. Yup, you can still click on it, but it doesn't appear to be clickable and that's the point. Here's how you do it:


<a href="pagelink.html" style="cursor: default;">archives</a>



Not all browsers support the changing of cursors, however IE6, Mozilla, Safari (and others I'm sure) support the "default" type which just reverts back to the arrow.

You can obviously stick this style in the CSS file to make your code cleaner, in fact, I recommend it :)

Where to use it

Use this technique wherever you have a link that points back to the same page you're currently on. Whether it's your logo on the homepage, the very last link in a breadcrumb trail, or in a navigation like on BusinessLogs. It makes navigation less confusing for users, and is literally ONE line of CSS code. How can you go wrong?

Comments

[Derek Featherstone]

Nice technique, but...

I'll play Devil's Advocate here - why link to the page that you are already on in the first place? Wouldn't it be better to just remove the link, rather than change the CSS? It is a lower tech approach, but it would work everywhere, even with CSS off, or on a mobile device etc...

[Mike]

I think I would rather keep main elements of the site consistent (main navigation for example) across all pages than to remove/add elements on a page by page basis. Plus I saw that done on a commercial site once and it confused the hell out of me.

Also, larger sites have their navigation spit out dynamically either by a server-side scripting language or a CMS, so when you're in a for loop iterating through an array of site navigation, the if statement used to throw the cursor: default; in there is pretty simple.

[John]

Wow... so simple, why didn't I think of that?

Great job Mike!!

[Sage]

Ha ha, amazing how well that works... I always thought that the "Weblog" tab at the top of this page wasn't clickable, but I never bothered to actually try it out! Brilliant technique.

[Mike]

Thanks for the kind words folks!

I think the next step would be to use JavaScript to kill the link from showing up in the bottom of the window upon rollover, then you really would have no idea it's a link. But that's an extreme add-on for only the most hardcore of usability people... I'll stick with this for now :)

[nkm]

The only thing that I don't like about this is that it will confuse some people who try to select the text (to copy and paste or whatever) and find that it takes them elsewhere.

If your breadcrumbs are dynamically generated, what makes removing the link any more difficult than changing its class?

[Mike]

Sometimes it's a hassle to write separate CSS styles for <a> tags and regular text (inside of a list item, or wherever), so this just makes it a bit easier on the designer. Also, if you have super-complicated display: block'd link styles, it's really a pain to recode everything.

Just my experience, your mileage may vary.

[Derek]

I think I would rather keep main elements of the site consistent (main navigation for example) across all pages than to remove/add elements on a page by page basis. Plus I saw that done on a commercial site once and it confused the hell out of me.

Let me rephrase -- I was only implying removing the <a href=""> component, leaving the text remaining, and in a different style.

If you are doing it dynamically, iterating through the for loop, to me it still makes more sense to just not output the href, even if it is a list item and you require different styles... Once you've done it once, it should work pretty much anywhere. I know setting up navbars on any new site I do takes about 30 seconds now, because I end up reusing the same PHP code.

In the end though, I agree... as with anything: "each to their own", and "your mileage may vary"

[Mike]

I gotcha now. I guess it all depends on how your CSS is set up. If you're using some crazy Matrix navigation like Didier always does, then keeping the links in there is the easiest way of going about it.

But if you have all textual links like 37signals, then just removing the link should be cool.

All depends on the complexity of your nav. This technique is good for when you have links that are display: block;, with background images, padding, etc. that you just can't change. Simple techniques can use simpler solutions ;)

[riccard0]

"All depends on the complexity of your nav. This technique is good for when you have links that are display: block;, with background images, padding, etc. that you just can't change."

You could also simply transform "a href=" in "a name=".

[Mike]

I'm not sure what you mean Riccardo, you mean target the a tag by it's attribute? Not many browsers have support for that yet, so it's not viable right now.

[alkatraz]

Great idea! Thank you

[honus]

Dude, I never realized that they were links. That's pretty sweet. You duped me, I want my money back!

[Jon Kennedy]

What you have is fine. It adds to the communication to the user in a subtle fashion that can only help. Removing via javascript, the rollover information for IE's status bar is not a good thing to even consider. You know better.

Besides, (superior) UA's such as Opera and Gecko will outright ignore that.

[[m]]

I think adding some duping (AKA Vanilla Ice style) code is an "enhancement" to your AI.

articles

Remove the href attribute. It will behave like a link as far as css is concerned (only :link won't work, but that's to be expected since it doesn't work on anchors aswell) and it wil not reload the whole page. No CSS change, no cursor, no downsides. It even validates, because href is not necessary.

[Nick Coad]

I'm inclined to agree with Jon Kennedy: what you have right now is awesome, there's no need for the JavaScript. At least with the status text, the user has some way to know that it's a link if they need to know, but due to the default cursor they won't assume it's a link straight away.

Good technique though: simple, yet very functional!

[Adam]

I agree with [m] that the best solution is to simply remove the href attribute from the anchor tag. I would also suggest adding title="current page" in case anyone mouses over it looking for the link.

[Petyo]

Yep... since me is lazy, i have written a small js snippet to get rid of all "current" links on the site. Keeps the usability brats away for a while.

function f ()
{
return false;
}

function checkForCurrentLinks()
{

var hrefs = document.getElementsByTagName("a");
for (var i = 0; i < hrefs.length; i ++)
try
{
if (hrefs[i].attributes["href"].value == location.href)
{
hrefs[i].style.cursor = "default";
hrefs[i].onclick = f;
}
}
catch (e){}

}

run it on window load event.

[Small Paul]

Just been thinking about this same thing for a tiny personal site, and I'd agree with removing the link (either the entire tag or the href attribute) as opposed to styling it into looking like something it isn't.

That way, users without stylesheets will also have a way to see where they are in the site, and users of screen reader software won't be presented with a link to the current page.

[riccard0]

"I'm not sure what you mean Riccardo, you mean target the a tag by it's attribute?"

What I mean is that if you replace an "a href=" with an "a name=", you will retain all the formatting of the matrix without having an actually clickable link.

[Joe Clark]

I am not wild about href="#", unless you meant that as some kind of placeholder for us to fill in a real URL.

[Mike]

That I did Joe, that I did. Now fixed, thanks :)

[SU]

Nice idea... Adam, shouldn't the line:
"if (hrefs[i].attributes["href"].value == location.href);"

Say this instead?:
"if (hrefs[i].href == location.href);"

[Mike]

Hey Scott.. I'm psyched to see you read my weblog :) Good luck with uptonic man, I know JF and the boys will miss ya.

[Mike P.]

riccard0,

Nice touch, that makes it super-seamless. No changing the CSS, fully X-browser compliant.

I just tried it out with some 'sliding-doors' tabs, which would require some serious css-gymnastics if you remove the anchor, and it works great.

[Eric]

I've been doing this for a year or so, and haven't heard any complaints from the one substantial-size site I'm using it on. People just don't notice anything unless the cursor changes, and I can still use it as a link if I'm trying to check things out.

My variation is to change the cursor to "text" for the links, rather than default, as this is what the cursor would be if the link were simply text. Default is what would happen if the link were an image.

Then, to return the cursor to the hand for the children of the item, if you're using nested lists, you have to set cursor to "pointer" and override this for IE by setting cursor to "hand". This lets the child elements behave like links.

[Mike]

Eric, that's a great point, do you know if the text cursor is supported by most browsers?

[Eric]

I've never had a problem with cursor:text - my only problem was figuring out that I had to specify and then override the rule for the hand on child elements.

[SU]

Mike, wanted to let you know I put this technique into practice on a site I'll be launching soon. I'll be interested to see if visitors are baffled by it or hardly notice it at all.

[Fran]

Nice technique but what happens if you are creating a template? Do you detach the "current" page from the template in order to use it? If so, then you will be creating more work than necessary. After all if you have a site containing over 20 pages, and have to update the site, then it would be time consuming not to mention a giant pain in the you-know-where to update the forementioned pages.

Breadcrumbs are ok as far as you assume that the pages are going to be named "index.html" and "default.html". What happens if they are not? Guess for every 2 steps forward in UI design concepts and ideas, there is about 10 steps back.

[Paul Redmond]

You guys are straining way too hard on this subject.
With a little CSS, you can make the current link in the hover state.
Do this 2 ways.

In your html, do this:
<a href="http://blah.com" class="current">Link</a>
<a href="http://somethingelse.com">Link</a>

In your css, do this:
a:link {
color: #ff0000;
}
a:hover, a.current {
color: #0000ff;
}
You can also do an id tag in the body element:

Html:
<body id="home">
<ul>
<li id="home"><a href="http://somesite.com" id="front">Home</a>
<li id="about"><a href="http://somesite.com" id="front">about</a>
</ul>
Css:
a:link {
color: #0000ff;
}
body#home #front {
color: #ff0000;
}
Obviously i did not put the full html source of an entire page, just a snippet to show an example.

This will make the link most likely in the "hover" position, as I like to make my "active" page the same as a hover state. It is unclickable, yet has the href for consistency and for search engines.
:D

[paul]

sorry to confuse, the id in the body tag example, you dont need an id tag in the link refrences, just in the "li" tags.
<body id="home">
<ul>
<li id="home"><a href="http://somesite.com" id="front">Home</a>
<li id="about"><a href="http://somesite.com">about</a>
</ul>

the css is right

[Stephen Carr]

My 2 cents; I just don't think this is a good idea. Typically a user expects a link to behave like a link -- in other words the cursor should change when hovering the link. It makes no sense to hide the link and then have to explain, "hey, its still a link, you can still click it".

I think this makes navigation MORE confusing, the user is left asking, why, why would the designer do this -- I trusted that all links behaved like links, now I am confused. Wait - is that a link too? What was the problem with the little hand cursor in the first place?

This statement confuses the hell out of me:

"...you can still click on it, but it doesn't appear to be clickable and that's the point."

The point is you can click it but you don't know that you can click it? If the UI needs explaining then it is not doing its job and this particular solution certainly needs some explaining.

[Jeremy Hicks]

I've just come across this topic and am interested because it seems like what I want to do; but as a relative newcomer to CSS I'm struggling to understand it and would welcome some clarification.

On my site I have a relatively complex navigation area, containing lots of links. This is included (from a separate file) on every page. Ideally I would like the menu item that refers to the current page to be displayed in bold, so that it gives the user a clue where they are; it could also be (or appear to be) non-clickable, as clicking it would be pretty pointless.

I have done this in the past with Javascript and SSI, but I am wondering if there is a way of doing it using CSS. What I don't quite understand is how you determine which link relates to the current page.

[Nick Drago]

I was trying to do this on one of my sites and I am unsure how I would do this dynamically with Wordpress. I have a sidebar navigation file with my menu, but how would I change this automatically?

[Kod Yazma]

css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm