xBreadcrumbs
Framework: jQuery Listed in: User Interface
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
- Light-weight script (~3Kb)
- Easy to integrate
- Fully customizable via CSS
- 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. |
Popular Categories
View All- Effects (7)
- Forms (6)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (10)
AJAX Tutorials
View All- How to Add Hints & Auto Focus Form Fields using jQuery
- Convert Images to Grayscale
- Advanced Plugins Development with ExtJS
- Rotate Images Using JavaScript
- Create Custom Cursors without .cur File
- Convert ASCII Character to Hex, Decimal and Binary Code
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 the Breadcrumbs script and will publish it to our site soon. Thanks again!
Alex
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
Michal Suski
March 29, 2010
Great script! But I can make it collapsible only when using submenus. Any idea?
Peter
March 30, 2010
Would be great if you could load the sublevels via Ajax!
ajaxBlender.com
March 30, 2010
Thanks Michal and Peter. Yes, this is not a problem to add. It would just be some extra coding. We actually made a similar script to add on to a client’s shopping cart in the past. Anyway, we may put it in a future update. I’ll post it here if we do it. Thanks!
Alex
Michal Suski
March 30, 2010
And what about collapsible crumbs with no submenus?
ricki
April 6, 2010
ok so, this breadcrumb doesn’t build when links are pressed, am i right? you have to set it up with your site links before hand? if so, why not call it a collapsable horizontal menu script? because in my experience breadcrumbs are to leave a trail of where u are on a website and where you’ve been previously.
Darren – ajaxBlender
April 9, 2010
ricki – to implement breadcrumbs you need two things: a server script which will return the full path from the home page to the current page and a client side script which will display this path in a nice and convenient way…the ajaxblender xBreadcrumbs script is a script for the client-side only…so, you will still need to generate the path from a server script… I checked with our lead developer, and we don’t think that xBreadcrumbs will prevent this type of call.
Srinivasan
May 25, 2010
The xbreadcrumb script is very good and useful. Thank you very much for the script. I faced z-index problem when i use along with horizontal superfish(jquery) menu.
Windows XP
Mozilla firefox 3.6.3 and IE 6
masonii
June 4, 2010
any solutions yet on getting this breadcrumb feature into wordpress? please help.
Erhan
August 11, 2010
Any update soon to create sub pulldowns via ajax?