This demo app show how the ruby gem slim_breadcrumb looks like in action.
Hover, click or doubleclick on the breadcrumb separators to show hidden breadcrumb elements. Hovering and clicking shows hidden elements nearby the mouse cursor, doubleclicking shows all hidden breadcrumb elements.
The above breadcrumb bar has got just the following HTML code and a usual breadcrumb css file. The rest is done automatically via JavaScript.
<nav> <div id="breadcrumb"> <ul> <li class="first crumb"><a href="#">#0 (Root)</a></li> <li class="crumb sep"> </li> <li class="slim crumb"><a href="#">#1 (Slim Crumb)</a></li> <li class="crumb sep"> </li> <li class="slim crumb"><a href="#">#2 (Slim Crumb)</a></li> <li class="crumb sep"> </li> <li class="crumb"><a href="#">#3 (Normal Crumb)</a></li> <li class="crumb sep"> </li> <li class="slim crumb"><a href="#">#4 (Slim Crumb)</a></li> <li class="crumb sep"> </li> <li class="slim last crumb"><a href="#">#5 (Slim Crumb)</a></li> </ul> </div> </nav>