JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<ul id="crumbs">
   <li class="home"><a href="#">Home</a></li>
   <li class="selected"><a href="#">Javascript</a></li>
   <li><a href="#">Flash</a></li>
   <li><a href="#">SEO</a></li>   
</ul>

CSS

ul#crumbs, ul#crumbs li { margin:0;padding:0;}

ul#crumbs li a {display:inline-block;padding:3px 4px;}

ul#crumbs li {list-style:none;display:inline;}

ul#crumbs li.selected {float:left;}

ul#crumbs li.home a {color:#fff !important;background:#000 !important}

/* for fun */
ul#crumbs li a {text-decoration:none;color:#353535;}
ul#crumbs li a:hover {color:#252525;}
ul#crumbs li.selected a {background:#c0c0c0;color:#000;font-weight:bold;}

JavaScript

$(function(){
    $('ul#crumbs li:not(.home) a').bind('click',crumbClick)
});

function crumbClick(){
    $('ul#crumbs .selected').removeClass('selected');
    $(this).parents('li').addClass('selected');
    return false;
}