<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  
<div class="wrapper">
  <div class="description">
    <h3>Expandable Breadcrumbs</h3>
    <p>Perfect for pages with long titles</p>
  </div>
  <ul class="breadcrumbs">
    <li class="first"><a href="#" class="icon-home"></a></li>
    <li><a href="#">First Level Interior Page</a></li>
    <li><a href="#">Second Level Interior Page</a></li>
    <li><a href="#">Third Level Interior Page</a></li>
    <li class="last active"><a href="#">Fourth Level Interior Page</a></li>
  </ul>
</div>

$green: #96be11;

@mixin inline {
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: top;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  color: #757575;
}

.description {
  padding-left: 15px;
  border-left: 2px solid #000;
  
  h3 {
    font-weight:300;
    font-size: 20px;
    line-height: 20px;
    margin: 0px;
    color: #000;
    text-transform: uppercase;
  }
  
  p {
    margin-top: 10px;
    font-weight:300;
  }
}

.wrapper {
  margin: 50px;
}

ul.breadcrumbs {
	margin: 25px 0px 0px;
	padding: 0px;
	font-size: 0px;
	line-height: 0px;
	@include inline;
	height: 40px;

	li {
		position: relative;
		margin: 0px 0px;
		padding: 0px;
		list-style: none;
		list-style-image: none;
		@include inline;
		border-left: 1px solid #ccc;
		transition: 0.3s ease;

		&:hover {
			&:before {
				border-left: 10px solid $green;
			}

			a {
				color: #000;
				background: $green;
			}

		}
		
		&:before {
			content:"";
			position: absolute;
			right: -9px;
			top: -1px;
			z-index: 20;
			border-left: 10px solid #fff;
			border-top: 22px solid transparent;
			border-bottom: 22px solid transparent;
			transition: 0.3s ease;
		}

		&:after {
			content:"";
			position: absolute;
			right: -10px;
			top: -1px;
			z-index: 10;
			border-left: 10px solid #ccc;
			border-top: 22px solid transparent;
			border-bottom: 22px solid transparent;
		}


		&.active {

			a {
				color: #000;
				background: $green;
			}
		}

		&.first {
			border-left: none;

			a {
				font-size: 18px;
				padding-left: 20px;
				border-radius: 5px 0px 0px 5px;
			}
		}

		&.last {

			&:before {
				display: none;
			}
			&:after {
				display: none;
			}

			a {
				padding-right: 20px;
				border-radius: 0px 40px 40px 0px;
			}
		}

		a {
			display: block;
			font-size: 12px;
			line-height: 40px;
			color: #757575;
			padding: 0px 15px 0px 25px;
			text-decoration: none;
			background: #fff;
			border: 1px solid #ddd;
			white-space:nowrap;
			overflow: hidden;
			transition: 0.3s ease;
		}
	}
}

//----------------------------------------
// Breadcrumbs
//----------------------------------------


$('.breadcrumbs li a').each(function(){

    var breadWidth = $(this).width();

    if($(this).parent('li').hasClass('active') || $(this).parent('li').hasClass('first')){

    

    } else {

        $(this).css('width', 75 + 'px');

        $(this).mouseover(function(){
            $(this).css('width', breadWidth + 'px');
        });

        $(this).mouseout(function(){
            $(this).css('width', 75 + 'px');
        });
    }

        
});