xBreadcrumbs (Extended Breadcrumbs) jQuery Plugins. jQuery Scripts & Tutorials.

Framework: jQuery Listed in: User Interface

That's right! For only $29.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!
xBreadcrumbs

Description

A new version of xBreadcrumbs 2 is available at Code Canyon.

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.
That's right! For only $29.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!

Darren – ajaxBlender

September 6, 2012

Erez,

The script is not using Ajax, it is actually pulling from HTML. If you like, post or email us (support@) the URL and we can look to see if there is a different issue.

Darren

Erez

September 4, 2012

Hi, great script.
If there a way to disable Ajax?

I know that it defeats the purpose, but I need a crumbtrail that is being pulled from HTML page.

Thanks.

Saeid

July 23, 2012

You have forgotten to add class=”xbreadcurmbs” to your ul element in markup displayed in step 3!

gofur

June 23, 2012

how do you call this jquery on another page?

Michal

October 20, 2011

On collapsible You have to stop animate on mouseout. You will have better effect without a animation queue. Nice plugin :)

Joe Privett

September 29, 2011

Is there a way to change the breadcrumbs dynamically? I can update the html content dynamically so that the new breadcrumbs are in place, but not sure how to then re-build them crumbs to reflect the new html. I imagine I have to re-run the _build() function in some way but not sure how. Any help would be appreciated.

Andreas

August 30, 2011

Unfortunately completely useless without having a license file. Using a dual license like GPL and MIT would it make much easier to integrate that nice product in some open source projects.

Regards
-Andreas

Anna

July 28, 2011

This is not a “Breadcrumb” generator, it simply creates a menu with drop down functionality. Breadcrumbs are based on which pages the user has clicked on, and creates a “crumb” for each page so the user can go back at any point. Waste of an hour trying to get this working! :(

Brett Palmer

June 17, 2011

It seems like if I don’t have a multilevel element it won’t animate. For instance:

Home

test

test

works great but

Home
test

does not animate. Any ideas on what I’m doing wrong?

Padraic

June 16, 2011

can you please add a LICENSE file to the distribution. Without it any corporate entity can’t really make use of this great library. Thanks.

Michal Suski

April 27, 2011

Hi, I improved your script so it only collapses breadcrumbs when their total width is greater than breadcrumbs container width. Feel free to contact me if you are interested in adding this improvement to your code.

eric

April 24, 2011

all the jsp page need include this

Home

Servers
Desktop Computers
Laptops

Laptops

Dell
HP
Apple
IBM

Apple

MacBook Pro
MacBook Air

MacBook Air

and all the jsp page need include stype??any idea to solve this problem?

ajaxBlender.com

March 25, 2011

Yes, you can use it in commercial projects without any limitations. Please just add the proper credit and url in the comments. Thanks!

Nirmala

December 23, 2010

How can I implement xbreadcrumb with levels? When I click appears at the side.

amit

December 16, 2010

Fixed my own Problem
just do below change in the xbreadcrumb.css file the

.xbreadcrumbs LI {
padding: 5px;
border-right: 1px solid #CECECE;
change->height: 20px; // original height is 16px
}

amit

December 16, 2010

when i test this script on my website
then
Home
Scripts
Contact Us
is not perfectly vertical center in box instead they are at bottom aligned
every thing else fine

GrafikaWarszawa

November 4, 2010

Yeah, great jquery fun…

Especially, this is based on list, so google will like this menus ;-)

Erhan

August 11, 2010

Any update soon to create sub pulldowns via ajax?

masonii

June 4, 2010

any solutions yet on getting this breadcrumb feature into wordpress? please help.

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

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.

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.

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

Peter

March 30, 2010

Would be great if you could load the sublevels via Ajax!

Michal Suski

March 30, 2010

And what about collapsible crumbs with no submenus?

Michal Suski

March 29, 2010

Great script! But I can make it collapsible only when using submenus. Any idea?

zenco

January 28, 2010

Amazing Grat work love jquery!!!

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.

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.

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

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

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!

Leave a comment

Your name

July 28, 2014

Spam protection. Enter result of expression you see in the box below.

5 + 1 =