Pure CSS Animated Breadcrumb

index.html

<nav class="breadcrumb">
  <ul>
    <li>
      <div class="arrow-end"></div>
      <div class="content home"><a href="#">Home</a></div>
      <div class="arrow-right"></div>
    </li>    
    <li>
     <div class="arrow-end"></div>
     <div class="content"><a href="#">Level One</a></div>
     <div class="arrow-right"></div>
    </li>
    <li>
     <div class="arrow-end"></div>
     <div class="content"><a href="#">Level Two</a></div>
     <div class="arrow-right"></div>
    </li>
  </ul>
</nav>

pure-css-animated-breadcrumb.markdown

Pure CSS Animated Breadcrumb

Utilizing the CSS triangle trick and some nice hover transitions creates a cool little breadcrumb menu.

A Pen by Sumer Mixon on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$color-text: #FFFFFF;
$color-text-hover: #F2CB05;
$color-background: #2795B6;
$color-background-hover: #04B2D9;
$size-box: 20px; // use an even number or things get ugly
$size-font: 15px;

a {
 font-family: sans-serif;
 line-height: $size-box;
 font-size: $size-font;
 text-decoration: none;
 color: $color-text;
 transition: color .5s;
}

li {
  list-style-type: none;
  float: left;
}

.arrow-end, .content, .arrow-right {
  float: left;
}

.content {
  background-color: $color-background;
  padding-right: $size-box;
  padding-left: $size-box/2;
  transition: 
   padding-right .5s, 
   padding-left .5s, 
   color .5s;
 }

 .home {
   // line to far left
   box-sizing: content-box;
   margin-left: -9999px;
   border-left: 9999px solid $color-background;
 }
    
 .arrow-right {
   width: 0; 
   height: 0; 
   border-top: $size-box/2 solid transparent;
   border-bottom: $size-box/2 solid transparent;
   border-left: $size-box/2 solid $color-background;
 }
    
 .arrow-end {
   width: 0; 
   height: 0; 
   border-top: $size-box/2 solid $color-background;
   border-right: $size-box/2 solid $color-background;
   border-bottom: $size-box/2 solid $color-background;
   border-left: $size-box/2 solid transparent;
 }

.breadcrumb {
  transition: 
  padding-right .5s, 
  padding-left .5s, 
  color .5s;
  
  ul { 
    li{
      &:hover{
        .content {
          background-color: $color-background-hover;
          padding-right: $size-box*2;
          padding-left: $size-box*1.5;
          a {
            color: $color-text-hover;
          }
        }
        
        .home {
          border-left-color: $color-background-hover;
        }
        
        .arrow-end {
          border-top-color: $color-background-hover;
          border-right-color: $color-background-hover;
          border-bottom-color: $color-background-hover;
        }
        
        .arrow-right {
          border-left-color: $color-background-hover;
        }
      }
    }
  }
}