Breadcrumbin ne olduğunu ne işe yaradığını diğer makalelerimizde öğrenmiştik.Bununla ilgili hem css hemde jquery destekli olanları hakkındada makalelerimiz bulunuyor.Şimdiki makalemizde apple.com da kullanılan breadcrumb tarzını öğreneceğiz.

Html kod bloğumuz olarak aşağıdaki şablonu kullanacağız.

<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>

Css dosyamıza eklememiz gereken kodlar ise aşağıdadır

#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;
}
#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;
}
#breadcrumb a:hover
{
    color:#35acc5;
}