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

Creating A Flat Style Breadcrumb With Pure CSS3

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

 

You Might Be Interested In: