CSS breadcrumb using background image

  • 06-09-2006

Breadcrumbs is a term used to describe hierarchical links that tell the visitor where he/she currently is on your site. Visually breadcrumbs are just links with some sort of separator between them, such as a bullet image. This CSS code transforms ordinary looking links organized in a unordered list into a breadcrumb by giving each link a background image with rollover effect.

Using CSS to style breadcrumbs isn't a new invention. A List Apart is describing this in Taming Lists from 2002, and Fat Eriks' breadcrumbs is another example.


The probably most common method for making breadcrumbs is something like this:

  1. <a href="/">Home ></a> <a href="/articles/">Articles</a> You are here

which will produce this result:

Home > Articles > You are here

However, this method isn't very flexible. What if I wanted the breadcrumbs to be like this instead?

Home » Articles » You are here

Then I would probably have to edit the HTML in a bunch of pages, and that's why I left this method and started using CSS formatted unordered lists instead. I know there are/have been discussions around using unordered lists as breadcrumbs. According to some using unordered lists isn't technically semantic, but since the links describe a hierarchy traversed in a particular order I don't see anything wrong in using unordered lists. Some also thinks that using a background image as this example shows is a bad solution since that image won't be printed. However, I always hide my breadcrumbs in the printer style sheet since I think it isn't necessary to print it. And therefor, let's move on to the solution.

The breadcrumb HTML

Remove formatting from Code

  1. <ul id="breadCrumb">
  2. <li><a href="/">Home</a></li>
  3. <li><a href="/articles/">Articles</a></li>
  4. <li>You are here</li>
  5. </ul>

Which makes your breadcrumb look like this:

This isn't exactly the look we wanted, so let's add some CSS.

The breadcrumb CSS

Remove formatting from Code

  1. #breadCrumb li {
  2. float: left;
  3. display: inline;
  4. margin-right: 4px;
  5. }

Now the breadcrumb is at least horisontal:

This isn't the breadcrumb we are looking for in this example, our breadcrumb is going to have a grey background, we wan't the links to be bold, and we wan't some kind of arrow pointing to the next level. This arrow is going to be a background image since that will be cross browser compatible. We are going to use the arrow image below, and we are going to use the Fast rollover without preload concept:


Remove formatting from Code

  1. * /*The "universal rule". Set's border, padding and margin to 0 for all values. NB! If you aren't used to using this kind of code in your CSS you may experience some changes in your overall design. If so, set padding, margin and border in your breadCrumb CSS instead*/
  2. {
  3. padding: 0;
  4. margin: 0;
  5. border: 0;
  6. }
  7. #breadCrumb {
  8. height: 18px; /* This is the height we wan't on our breadcrumb */
  9. padding: 4px 0 0 8px;
  10. background: #999; /* This is our background color */
  11. color: #f5f5f5; /*This is our color on the text which isn't a link. We want' they to be light grey */
  12. }
  13. #breadCrumb li {
  14. float: left;
  15. display: inline;
  16. margin-right: 4px;
  17. }
  18. #breadCrumb a {
  19. color: #fff; /* Our breadcrumb links are going to be white */
  20. font-weight: bold; /* And bold */
  21. background: url(/layout/icons/breadcrumb.gif) top right no-repeat;
  22. padding-right: 11px; /* We need to add some padding to the right of the link. This space is where the background image is going to be shown. */
  23. text-decoration: none;
  24. }
  25. #breadCrumb a:hover {
  26. color: #333;
  27. background:url(/layout/icons/breadcrumb.gif) bottom right no-repeat;
  28. }

And below is our final CSS breadcrumb:

Note that if you look in the source code for this page you will see some differences from the example. This is because I have to overrule some CSS settings for unordered lists used in articles.