Wednesday, October 10, 2012

Simple scalable CSS based breadcrumbs

Simple scalable CSS based breadcrumbs

A few days ago I was implementing breadcrumbs in a website I'm working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it's been a while since I last wrote about anything CSS-related. The one I'll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

The one I implemented in the project I'm working on looks a bit similar, but was more complex to code. More CSS classes and a span element were needed to make it work. I thought I stick to a very simple one, a bit like the one Apple is using.

HTML

<ul id="crumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Main section</a></li>
<li><a href="#">Sub section</a></li>
<li><a href="#">Sub sub section</a></li>
<li>The page you are on right now</li>
</ul>

All items have links, except the page you're on. While working on this, I wondered if a list is the most "appropriate" structured code to use for breadcrumbs. I don't think there is a strict rule here, but I believe using a list is a meaningful way and so semantically I believe it's appropriate.

CSS

ul, li {
    list-style-type:none;
    padding:0; margin:0;
}

First we reset the basic list styling behavior: hide the typical round bullets that appear by default and remove the indentation by setting the margin and padding to zero.

#crumbs {
    border:1px solid #dedede;
    height:2.3em;
}

I've given the list an ID called #crumbs. I've add a border around the breadcrumbs and set a specific height.

#crumbs li {
    float:left;
    line-height:2.3em;
    padding-left:.75em;
    color:#777;
}

All crumbs need to appear on 1 horizontal line so we give each li element float:left. The text needs to be center aligned vertically, so we use the same value for line-height as we did for the height of the list which is 2.3em. To leave some space to the left in between each crumb we add a padding on the left of 0.75 ems. Next, we add the color of the text.

#crumbs li a {
    display:block;
    padding:0 15px 0 0;
    background:url(images/crumbs.gif) no-repeat right center;
}

We want to have the entire arrow area clickble. To do this we give the a element display:block. We add the background-image to the a element. The image looks like this:

Simple scalable CSS based breadcrumbs

It is a rather big image, but that's because we want it to be scalable. The background-image is positioned to the right and vertically centered. So when the user enlarges the text in his browser the corner of the arrow will always stay nicely vertically center aligned.

#crumbs li a:link, #crumbs li a:visited {
    text-decoration:none;
    color:#777;
}

Add the styling for the text links. I've used text-decoration:none to hide the underlining and I've used a soft color just to to draw not too much attention to these.

#crumbs li a:hover, #crumbs li a:focus { color:#dd2c0d; }

You can download the Photoshop/PSD file here.

View Demo


via Veerle's Blog - by