So now that you’ve got your breadcrumb sorted, you can take this one step further and spice it up a bit. For the next part, we’re going to be using the code from a tutorial at Janko at Warp Speed, and with this code, we’re going to turn our breadcrumb into something that looks like the ones you see on Apple.com!

The Apple.com breadcrumb:

And what we’re making:

First, download the html version here, and open it in a your web editor (ie Notepad, Dreamweaver etc). Scroll down until you find <ul id=”breadcrumb”>. This is where we’re going to start editing. All you need to do is copy and paste the following code: <ul id="breadcrumb"> <li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li> <li><?php the_category(', ') ?></li> <li><?php the_title(); ?></li> </ul>

This is basically the same code as we had above, just putting into a list. Make sure you upload the home.png file to /images/, and while you’re at it, upload the other images.