Smarter Breadcrumbs: jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way.

As the length of a breadcrumb menu may be very long & the common method used for this problem is limiting th eamount of menus used, jBreadCrumb follows another route.

jQuery BreadCrumb Menu

It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

This is a better navigation in means of usability & SEO.

Usage is not complicated & it only requires the jQuery Easing plugin.

  • I find this solution is really only usable from right to left. If you’re trying to build out the tree from left to right, the breadcrumb motion often forces you to skip a node, which is really frustrating. Ideally, the breadcrumb items should only collapse once the most rolls out of the UL, not the individual LI items themselves.

    Nonetheless an interesting approach.



  • edit ‘once the mouse rolls’

  • Nice!

  • The functionality is pretty neat, as is the interactivity. I agree that this would most likely help with SEO–when your information architecture is properly implemented, but it doesn’t really make for a very usable construct. While the animation may make it discoverable, it’s confusing to look at and provides little visual queues as to the information it contains.

  • Rich

    I really love this thing. However, I can’t seem to get it to allow for an Image Icon with the Text. Is this possible?


    Home > [Image1] Text Link1 > [Image2] Text Link2

    The text disappears when the image is there for some reason.

  • Constantinos

    Thanks ever so much for this one! Cheers!

  • Alain Tranquille

    I am a newbie at Jquery and would appreciate if you would explain how the Breadcrumb plugin picks up the menu.

    Is there any other coding needed for this to happen.