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.

32 Comments

  • Kevin Pang (August 14, 2008)

    As usual, a very easy to follow tutorial with a very nice finished result. Well done. :-)

  • Ryan Farley (August 15, 2008)

    Completely awesome. Thanks. :D

  • Aerith (August 15, 2008)

    Ohh how nice! I love the effect, and I learned something new. =D
    Never knew there was even a name for the style.

    I love all the tutorials you have, especially the sliding doors thing.

  • Muhammad Mosa (August 15, 2008)

    I noticed that I start to kick your posts before reading Janko.
    Another cool post. You simplify life my friend ;-)

  • jbj (August 15, 2008)

    Great tutorial, I really enjoyed it.
    If you’re interested in apple.com technics, you should definitely check out my <a href="http://www.catswhocode.com/blog/web-design/how-to-recreate-applecom-menubar-38">How to: Recreate apple.com menubar</a> tutorial!

  • KAC (August 15, 2008)

    I bet you didn`t test on IE6 ;-)

  • joshka (August 15, 2008)

    I like the effect, though an ordered list would probably be more semantic.

  • Janko (August 15, 2008)

    Thanks guys!!

    Muhammad, thanks mate, you are on my must-read-list on google reader :)

    Ryan, I like your blog, subscribed!

    @jbj: Nice one, I like it!

    @KAC: No I did’t test it in IE6, I just dislike that browser ;)

  • Bob (August 15, 2008)

    Doesn’t work with IE6

  • Rahul (August 16, 2008)

    <b>well i tried to work it out in my localhost but it does not work</b>

    i think it has to be worked out a bit more. (H)

  • Janko (August 16, 2008)

    Rahul, what exactly is not working?

  • Gerasimos (August 16, 2008)

    I like the effect too, and i’ll agree with Joshka about the ordered list. A bit more semantic, isn’t? Great stuff :)

  • Amre Ellafi (August 16, 2008)

    c00L !

  • Janko (August 16, 2008)

    Joshka & Gerasimos, yes, we can say that the items are in some kind of order, so OL could also be used. But when you are unsure, UL is a "safe bet" ;)

  • lostsock (August 17, 2008)

    I have updated the code and images to work with IE6, IE7, Firefox 2, Firefox 3, Opera and Safari.

    Preview: http://www.lostsockdesign.com.au/apple-breadcrumb/index.html
    Download: http://www.lostsockdesign.com.au/apple-breadcrumb/breadcrumb.zip (5kb)

  • Marcin (August 17, 2008)

    well it looks quite easy to do but is it really that easy heh? Gota try that

  • Janko (August 17, 2008)

    @lostsock: great work, thanks! I updated the article with the links you provided.

    In any case, I wish IE6 users would move to newer browsers. Designing for IE6 makes me feel as when I designed for 800×600 screen resolution.

  • Vladimir Vujosevic (August 18, 2008)

    I just wanna say that your comments are broken in IE6 :) If you havent tested it, but i doubt. Greetings from fellow countryman. :)

  • Eazzy | Web Design (August 18, 2008)

    Great!) I love simple CSS tricks like this that. Thanx

  • PJ (August 19, 2008)

    If you rule out ie6 completely, you failed. 25% market share is pretty high.

  • JONxBLAZE (September 4, 2008)

    Very nice..worked like a charm! thanks!:)

  • Paolo (September 9, 2008)

    thanks for your guide! i’ll try your solutions as soon as i can…

  • Abhijeet (September 21, 2008)

    I learn something new from anything you write! The sliding doors article helped with one of my personal projects and this will help with the one I am currently working on.

    Keep up the good work buddy!

  • Alex Vegas (October 12, 2008)

    Very nice one but as Joshka suggested an ordered list would be more semantic.

  • Jonathan Hollin (October 19, 2008)

    Great tutorial. It’s on my website now! Thanks.

    See: http://blog.urbanmainframe.com/2008/08/10-sexy-macintosh-workspaces/

  • Goatse (October 28, 2008)

    PJ i dont know where you lived but 25% on ie6 seems a lot for me.

    i hate those ie6 morons

    http://tronche911.labrute.fr
    :)

  • Wall art wall decor (November 8, 2008)

    Cool, that’s something I’ve been looking for. Other than breadcrumb, it will be even better if we can have a tutorial for creating css menu like those on apple.com.

  • mahesh (February 20, 2009)

    Hi,

    One of the most simplest tutorial i ever read in web. Keep the good work going. Really Awesome.

  • Craig (April 23, 2009)

    Simple way to get it working on IE6.

    Add "display: inline;" to the LI section, and remove the "float: left;" and put it in the links section.

    That fixes it! :)

  • James (June 11, 2009)

    Having problems getting the background images up. Newbie to CSS, so please excuse the (likely) simple problem. Please help?

  • Claudia (July 15, 2009)

    This is great!! Thanks, man.

  • Matt (February 10, 2010)

    Really nice and simple effect!

    I have one question though – The breadcrumbs I’m working with sometimes go onto 2 or more lines, which breaks the design. Any plans on doing an update that would cover this eventuality?