Breadcrumb ziyaretçilerin site içerisinde bulundukları yeri gösteren ve bu sayede site içerisinde daha kolay diğer ksıımlara erişimlerini sağlayan bir gezinme çubuğudur.Normalde çoğu kez bu bahsi geçen gezinme çubuğu Css ile yapılsada jquery kullanılarak yapılmasıda mümkün.Hem görsellik açısından hemde kullanım açısından çok daha güzeldir.

Download butonundan gerekli dosyaları indirin ve sayfanızın head /head etiketleri arasına aşağıdaki kodları ekleyin

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../xbreadcrumbs.js"></script>
<link rel="stylesheet" href="../xbreadcrumbs.css" />
<script type="text/javascript">
     $(document).ready(function(){
          $('#breadcrumbs').xBreadcrumbs();
     });
</script>

Sayfanızda genizme çubuğunun gösterilmesini istediğiniz kısma aşağıdaki kodları ekleyin ve sitenize göre bölüm linklerini düzenleyin.

<ul id="breadcrumbs">
     <li>
          <a href="#">Home</a>
          <ul>
               <li><a href="#">Servers</a></li>
               <li><a href="#">Desktop Computers</a></li>
               <li><a href="#">Laptops</a></li>
          </ul>
     </li>
     <li>
          <a href="#">Laptops</a>
          <ul>
               <li><a href="#">Dell</a></li>
               <li><a href="#">HP</a></li>
               <li><a href="#">Apple</a></li>
               <li><a href="#">IBM</a></li>
          </ul>
     </li>
     <li>
          <a href="#">Apple</a>
          <ul>
               <li><a href="#">MacBook Pro</a></li>
               <li><a href="#">MacBook Air</a></li>
          </ul>
     </li>
     <li><a href="#">MacBook Air</a></li>
</ul>