Create apple.com-like breadcrumb using simple CSS

August 14, 2008

I believe you all know what breadcrumbs are. If I would have to make a simplest, rough definition I could say it is a navigation pattern that shows a path from the home page to the current one. If you are still unsure what breadcrumbs are (or my “definition” is too rough) be sure to read Breadcrumbs pattern explanation on Welie.com

In its simplest form it usually looks like this:

You are here: Home > Sample page 1 > Sample page 2 > Current page

But we are going to enhance this simple form and to create a breadcrumb that is similar to the one on apple.com. You can see the example on store.apple.com.

 

Let’s create something that looks like this

As you can see on the screenshot above, breadcrumb has a soft gray gradient and a separator that looks like a right arrow. Those are the only two images that we are going to use: background gradient and a separator. The design we want to create looks like on the image below.

breadcrumb

So what would be the best way to create a breadcrumb? Personally I think it’s the best to use unordered list (UL element). So we can have a HTML structure like this:

<ul id="breadcrumb">
    <li><a href="#" title="Home"><img src="home.png" alt="Home" class="home" /></a></li>
    <li><a href="#" title="Sample page 1">Sample page 1</a></li>
    <li><a href="#" title="Sample page 2">Sample page 2</a></li>
    <li><a href="#" title="Sample page 3">Sample page 3</a></li>
    <li>Current page</li>
</ul>

In the example above we have unordered list that has four list items. Each list item has a link that will point to a single page in the path, except for the last one. There is no need to point to a current page since user is already viewing it.

If you try to see this example in a browser you would see a simple bulleted list. So we have to use some CSS here to make things right.

First we’ll style UL element:

#breadcrumb
{
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url('bc_bg.png');
    background-repeat:repeat-x;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
}

There are some attributes here that I would like to explain.

Next thing we have to do is to style our list items.

#breadcrumb li
{
    list-style-type:none;
    float:left;
    padding-left:10px;
}

#breadcrumb a
{
    height:30px;
    display:block;
    background-image:url('bc_separator.png');
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

.home
{
    border: none;
    margin: 8px 0px;
}

Again, I will explain these three classes. We first styled each LI element inside unordered list:

Each link inside list item will have this settings:

The last class (home) will set the attributes for home icon.

The last thing we have to do is to add some hover effect on links:

#breadcrumb a:hover
{
    color:#35acc5;
}

Believe it or not that’s all.

See live example

Update 17.08.2008: Some of my readers complained this isn’t working in IE6 (I really think it’s time to move to IE7 or Firefox). Thanks to @lostsock this is working now. You can preview revised version.

Conclusion

If you review the code carefully, you can notice that you can create a variety of designs by changing background and separator images. Try and see the results!

Let's discuss this on twitter.

Before you leave