jQuery Plugin For Responsive Breadcrumbs - rCrumbs

rCrumbs is an useful and easy-to-use jQuery plugin for creating a responsive breadcrumbs that automatically resizes your breadcrumbs with a smooth animation to fit your browser window. The number of navigation items displayed is dynamically adapted depending on the available space in the browser window.

How to use it:

1. Include jQuery library and jQuery rCrumbs plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.rcrumbs.js"></script>

2. Markup html structure

<div class="rcrumbs" id="breadcrumbs">
<ul>
<li><a href="#">Home</a><span class="divider">></span></li>
<li><a href="#">jQuery plugins</a><span class="divider">></span></li>
<li><a href="#">jQuery</a><span class="divider">></span></li>
<li><a href="#">jQueryScript</a><span class="divider">></span></li>
<li><a href="#">Google</a><span class="divider">></span></li>
<li><a href="#">Demo</a><span class="divider">></span></li>
<li><a href="#">jQuery rCrumbs plugin Demo</a></li>
</ul>
</div>

3. The CSS

.rcrumbs {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.rcrumbs > ul {
  padding: 0;
  list-style: none;
}
.rcrumbs > ul > li {
  overflow: hidden;
  display: none;
}
.rcrumbs > ul > li.show {
  display: inline-block;
}
.rcrumbs a {
  color: #4682b4;
  text-decoration: none;
}
.rcrumbs a:hover {
  color: #565c6e;
}
.rcrumbs .divider {
  color: #cccccc;
  padding: 0 5px;
}

4. Call the plugin

<script>
    $("#breadcrumbs").rcrumbs();
</script>

5. Available options and callback functions.

<script>
$("#breadcrumbs").rcrumbs({
callback: {
preCrumbsListDisplay: $.noop, //A function which is executed before the crumbs list is rendered
preCrumbDisplay: $.noop, //A function which is executed before each crumb is rendered
postCrumbsListDisplay: $.noop, //A function which is executed after the crumbs list is rendered
postCrumbDisplay: $.noop //A function which is executed after each crumb is rendered
},
ellipsis: true, // Display ellipsis when only the last crumb remains with not enough space to be fully displayed
windowResize: true, // To activate/deactivate the resizing of the crumbs on window resize event
nbUncollapsableCrumbs: 2, // Number of crumbs which can not be collapsed.
nbFixedCrumbs: 0, // Number of crumbs which are always displayed on the left side of the breadcrumbs
animation: {
activated: true, // Activate an animation when crumbs are displayed/hidden on a window resize
speed: 400 // Animation speed (activated option must be set to true)
}
});
</script>

Change Log:

v1.1.0 (2014-02-28)

• Added : new option nbFixedCrumbs 

v1.0.2 (2013-05-13)

• Added : new option nbUncollapsableCrumbs

---

This awesome jQuery plugin is developed by cm0s. For more Advanced Usages, please check the demo page or visit the official website.