Breadcrumbs Navigation

HTML
<div id="crumbs"> <h1>Breadcrumbs</h1> <ul> <li><a href="#1"><i class="fa fa-home" aria-hidden="true"></i></a></li> <li><a href="#2"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#3"><i class="fa fa-cart-plus" aria-hidden="true"></i> Cart</a></li> <li><a href="#4"><i class="fa fa-credit-card-alt" aria-hidden="true"></i> Checkout</a></li> </ul> </div>
SCSS
$crumbs-back:#F3F5FA; $text-color:#8093A7; body { margin: 100px auto; font-family: Helvetica; background: #FFF; } #crumbs { text-align: center; h1{ padding:0 0 30px; text-transform:uppercase; font-size:.9rem; font-weight:600; letter-spacing:.01rem; color: $text-color; } ul { list-style: none; display: inline-table; li { display: inline; a { display: block; float: left; height: 50px; background: #F3F5FA; text-align: center; padding: 30px 20px 0 60px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: $text-color; &:after { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #F3F5FA; position: absolute; right: -40px; top: 0; z-index: 1; } &:before { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #fff; position: absolute; left: 0; top: 0; } } } } } #crumbs ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 40px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #crumbs ul li:last-child a:after { display: none; } #crumbs ul li a:hover { background: #357DFD; color:#fff; } #crumbs ul li a:hover:after { border-left-color: #357DFD; color:#fff; }
JAVASCRIPT
Expand for more options Login