xBreadcrumbs

Framework: jQuery Listed in: User Interface

xBreadcrumbs

xBreadcrumbs (Extended Breadcrumbs) is a jQuery plug-in to create categorized breadcrumbs for your site. This may be useful if your website has a deep structure and you want allow your visitors to quickly navigate through one section of the site to another. xBreadcrumbs works with unordered lists (UL/LI) which would make your breadcrumbs fully optimized for search engines. An SEO freindly breadcrumb has many benefits.

Features

  1. Light-weight script (~3Kb)
  2. Easy to integrate
  3. Fully customizable via CSS
  4. Works with all modern browsers

How to Use

1.) Download xBreadcrumbs script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect jQuery framework, xBreadcrumbs plugin and CSS. (Make sure paths to files are correct.)

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

3.) Create your breadcrumbs structure inside of your <body>…</body> tag.

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

4.) Use the following code (preferably inside of your <head>…</head> tag) to initialize xBreadcrumbs.

<script type="text/javascript">
     $(document).ready(function(){
          $('#breadcrumbs').xBreadcrumbs();
     });
</script>

That’s it ;) Click the Demo button to see it in action.

Options

Configuration Option Default Value Description
showSpeed fast Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets speed of sub level to appear. If empty then no transition is used.
hideSpeed empty Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets speed of sub level to hide. If empty then no transition is used.
collapsible
false Parameters enables collapsing of upper levels.
collapsedWidth
10 (pixels) Width of collapsed level.

lassom

November 11, 2009

This script is great! Does anyone know how to get it to work in WordPress? I added this to my WordPress theme and put it in the header.php file but it doesn’t render right at all. Has anyone done this? Any tips would be a life saver. Thanks!

ajaxBlender.com

November 16, 2009

Thank you lasson for the question. The above script is a common jQuery-based plugin and can be integrated into any CMS (WordPress, Joomla, Drupal, etc.), however it will require additional programming to function properly and to output the necessary structure for the HTML (see code samples above.)

ajaxBlender.com

November 16, 2009

Actually, I just ran this topic by our team, and we decided that we will create a WordPress Plugin for Breadcrumbs and will publish to our site soon. Thanks again!

felix

December 16, 2009

Hi, I have a master header on a site that’s based on tpl files and wondering if this will work because I cannot get it to work at all.

Darren – ajaxBlender

December 17, 2009

Felix, the image rotation script we created should work via a TPL file without any problems. But we can help troubleshoot it with you. Could you supply a sample of the code and URL? This will help us see how you connect the code in the generated HTML file.

zenco

January 28, 2010

Amazing Grat work love jquery!!!

Alex Flueras

March 1, 2010

Really nice script. I will use it on my next projects. Thanks so much for sharing.

sadri

March 3, 2010

Thanks for the script

Leave a comment

Your name

March 19, 2010

Spam protection. Enter letters you see in the box below.