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.Cool Breadcrumb design

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


  • Bruno

    Bruno Admin

  • Ammar Hanif

    nice very helpful for me.
    http://www.graphixstock.com

  • http://www.facebook.com/niels.keurentjes Niels Keurentjes

    You may be interested to see that I recreated your menu in pure CSS as part of a question on Stack Overflow at http://stackoverflow.com/a/16429791/1729885, without JS and without the obsolete spans inside the links. It was a rather quick hack so not entirely sure it’s identical, but it sure looks that way. Let me know what you think :)