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.

The HTML code

Here is our HTML code. It's a simple unordered list:

1. <ul id="crumbs">
2. <li><a href="#">Home</a></li>
3. <li><a href="#">Main section</a></li>
4. <li><a href="#">Sub section</a></li>
5. <li><a href="#">Sub sub section</a></li>
6. <li>The page you are on right now</li>
7. </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.

The CSS

Here is the CSS styling:

1. ul, li {
2. list-style-type:none;
3. padding:0;
4. margin:0;
5. }

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.

1. #crumbs {
2. border:1px solid #dedede;
3. height:2.3em;
4. }

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

1. #crumbs li {
2. float:left;
3. line-height:2.3em;
4. padding-left:.75em;
5. color:#777;
6. }

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.

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

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:

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.

1. #crumbs li a:link, #crumbs li a:visited {
2. text-decoration:none;
3. color:#777;
4. }

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.

1. #crumbs li a:hover, #crumbs li a:focus {
2. color:#dd2c0d;
3. }

Then last but not least add the text styling when the user hovers the crumbs. If you want to have the underlining appear again on hover, just add text-decoration:underline.