<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        
<div class="l-breadcrumbs">
  <div class="c-breadcrumbs js__ellipses">
    <a href="#" class="c-breadcrumbs__item c-item_home">
      <span class="btn-home_icon fa fa-home"><span>
      <span class="btn-home_text">Home<span>
    </a>
    <div class="c-breadcrumbs__item c-item_default js__ellipses_item">...</div>
    <a href="#" class="c-breadcrumbs__item c-item_default"><div>label 1. A very very long one to truncate</div></a>
    <a href="#" class="c-breadcrumbs__item c-item_default"><div>label 2. A very very long one to truncate</div></a>
    <a href="#" class="c-breadcrumbs__item c-item_default"><div>label 3. A very very long one to truncate</div></a>
    <a href="#" class="c-breadcrumbs__item c-item_default"><div>label 4. A very very long one to truncate</div></a>
    <a href="#" class="c-breadcrumbs__item c-item_default"><div>label 5. A very very long one to truncate</div></a>
    <div class="c-breadcrumbs__item c-item_default"><div>label 6. A very very long one to truncate</div></div>
  </div>
</div>

.l-breadcrumbs{
  width:100%;
  min-width:320px;
  display:inline-block;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.c{
  &-breadcrumbs{
    width:80%;
    margin:0 auto;

    &__item{
      display: inline-block;
      margin-bottom: 0;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      background-image: none;
      white-space: nowrap;
      padding: 6px 12px 6px 24px;
      font-size: 14px;
      line-height: 1.428571429;
      position: relative;
      float: left;
      text-decoration:none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;

      &:first-child {
        padding: 6px 6px 6px 10px;
        border-left:none;
      }       
      &:not(:last-child)::before {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 17px solid transparent;
        border-bottom: 17px solid transparent;
        border-left: 10px solid #ccc;
        position: absolute;
        top: 50%;
        margin-top: -17px;
        margin-left: 1px;
        left: 100%;
        z-index: 3;
      }
      &:not(:last-child)::after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 17px solid transparent;
        border-bottom: 17px solid transparent;
        border-left: 10px solid #fff;
        position: absolute;
        top: 50%;
        margin-top: -17px;
        left: 100%;
        z-index: 3;
      }
    }
    
    & > * > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    & > *:nth-child(n+2) {
      display:none;
    }
    @media (max-width: 767px) {
      & > *:nth-last-child(-n+2) {
        display:block;
      } 
      & > * div {
        max-width: 60px;
      }
    }
    @media (min-width: 768px) and (max-width:991px) {
      & > *:nth-last-child(-n+4) {
        display:block;
      } 
      & > * div {
        max-width: 100px;
      }
    }
    @media (min-width: 992px) {
      & > *:nth-last-child(-n+6) {
        display:block;
      } 
      & > * div {
        max-width: 170px;
      }
    }
  }
  &-item{
    &_default, &_home{
      color: #b7b7b7;
      background-color: #fff;
      border-color: #ccc; 

      &:last-child {
        color:#808080;  
      }

      &:not(:last-child):hover,
      &:not(:last-child):focus,
      &:not(:last-child):active{
        background-color: #ebebeb;
        &:before {
          border-left: 10px solid #ccc;
        }
        &:after {
          border-left: 10px solid #ebebeb;
        }
      }
    }
  }
}

//helpers and response
// .c-breadcrumbs > * > div {
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
// }
// .c-breadcrumbs > *:nth-child(n+2) {
//   display:none;
// }
// @media (max-width: 767px) {
//   .c-breadcrumbs > *:nth-last-child(-n+2) {
//     display:block;
//   } 
//   .c-breadcrumbs > * div {
//     max-width: 60px;
//   }
// }
// @media (min-width: 768px) and (max-width:991px) {
//   .c-breadcrumbs > *:nth-last-child(-n+4) {
//     display:block;
//   } 
//   .c-breadcrumbs > * div {
//     max-width: 100px;
//   }
// }
// @media (min-width: 992px) {
//   .c-breadcrumbs > *:nth-last-child(-n+6) {
//     display:block;
//   } 
//   .c-breadcrumbs > * div {
//     max-width: 170px;
//   }
// }

/* inspired https://bootsnipp.com/snippets/featured/responsive-breadcrumbs*/

$(document).ready(function(){
  $(window).resize(function() {

    ellipses = $(".js__ellipses .js__ellipses_item")
    if ($(".js__ellipses a:hidden").length >0) {ellipses.show()} else {ellipses.hide()}

  })    
});