Creating A Flat Style Breadcrumb With Pure CSS3

In this tutorial we’re going to create a flat styled and responsive breadcrumb for your website, using only CSS and html. No javascript, no dependencies, and easy to customize.

Demo

Author

Usage:

Create a breadcrumb using html unordered list:

<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>

The CSS

$blue-gray : #34495e;
$blue-gray-darken : #2c3e50;
$blue : #3498db;
$blue-darken : #2980b9;
$green : #1abc9c;
$green-darken : #16a085;
* {
margin: 0;
padding: 0;
 @include box-sizing(border-box);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {
text-align: center;
 background-color: $blue-gray;
}
h1 {
font-weight: 100;
font-size: 32px;
padding: 40px;
color: #fff;
}
#breadcrumb {
list-style: none;
display: inline-block;
 .icon {
 font-size: 14px;
}
li {
float: left;
 a {
 color:#FFF;
 display:block;
 background: $blue;
 text-decoration: none;
 position:relative;
 height: 40px;
 line-height:40px;
 padding: 0 10px 0 5px;
 text-align: center;
 margin-right: 23px;
}
 &:nth-child(even) {
 a {
 background-color: $blue-darken;
 &:before {
 border-color:$blue-darken;
 border-left-color:transparent;
}
 &:after {
 border-left-color:$blue-darken;
}
}
}
 &:first-child {
 a {
 padding-left:15px;
 @include border-radius(4px 0 0 4px);
 &:before {
 border:none;
}
}
}
 &:last-child {
 a {
 padding-right:15px;
 @include border-radius(0 4px 4px 0);
 &:after {
 border:none;
}
}
}
a {
 &:before,  &:after {
 content: "";
 position:absolute;
 top: 0;
 border:0 solid $blue;
 border-width:20px 10px;
 width: 0;
 height: 0;
}
 &:before {
 left:-20px;
 border-left-color:transparent;
}
 &:after {
 left:100%;
 border-color:transparent;
 border-left-color:$blue;
}
 &:hover {
 background-color: $green;
 &:before {
 border-color:$green;
 border-left-color:transparent;
}
 &:after {
 border-left-color:$green;
}
}
 &:active {
 background-color: $green-darken;
 &:before {
 border-color:$green-darken;
 border-left-color:transparent;
}
 &:after {
 border-left-color:$green-darken;
}
}
}
}
}