Breadcrumbs fix using jQuery

Breadcrumb navigation is very important part of any website and so user will have idea about link flow and easily get back to where they come from.

Design of the breadcrumbs can be very simple and complex as well. Suppose we want to create breadcrumb navigation as below image.

As we can view that there are layers for each navigation items, Its look easy to create html/css , but as there are layers and navigation items are dynamic (it can be 2 – 4 anything).

So, first navigation Item should have highest z-index , then next minus 1 of highest (home -4, Category -3, Sub Category -2, Sub sub category 1).

Adding dynamic z-index is not possible from CSS , for this we have to use javaScript / js frameworks (jQuery / YUI ). In this tutorial I have used jQuery.

First of all we have to count number of navigation items , for this we can use .length or .size()

var breads = jQuery(“ul.breadcrumbs li”).length;

This will return total number of navigation items (in this case 4). Now we have to use this variable to add z-index to list items.  We will use .each and .css to add z-index dynamically.

 View Live Demo or fork code from github repo