<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');
        });
    }

        
});