7+ CSS Breadcrumb Examples

This post contains a total of 7+ CSS Breadcrumb Examples with Source Code. All these Breadcrumbs are made using CSS.

You can use the source code of these examples with credits to the original owner.

CSS Breadcrumb Examples

1. Flat CSS3 Breadcrumb

Made by Firat Ciftci. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

body {
  text-align: center;
  background-color: #34495e;
}

h1 {
  font-weight: 100;
  font-size: 32px;
  padding: 40px;
  color: #fff;
}

#breadcrumb {
  list-style: none;
  display: inline-block;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #FFF;
  display: block;
  background: #3498db;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
}
#breadcrumb li:nth-child(even) a {
  background-color: #2980b9;
}
#breadcrumb li:nth-child(even) a:before {
  border-color: #2980b9;
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) a:after {
  border-left-color: #2980b9;
}
#breadcrumb li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  border: none;
}
#breadcrumb li:last-child a {
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #3498db;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #3498db;
}
#breadcrumb li a:hover {
  background-color: #1abc9c;
}
#breadcrumb li a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}
#breadcrumb li a:hover:after {
  border-left-color: #1abc9c;
}
#breadcrumb li a:active {
  background-color: #16a085;
}
#breadcrumb li a:active:before {
  border-color: #16a085;
  border-left-color: transparent;
}
#breadcrumb li a:active:after {
  border-left-color: #16a085;
}
</style>
</head>
<body>
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  
  <h1>Flat CSS3 breadcrumb</h1>
  
<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>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>
</body>
</html>

2. Multi-line Pure CSS Breadcrumb Arrows

Made by Glynn Smith. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: #333;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 480px;
  padding: 0 40px;
}

.breadcrumb {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  margin: auto;
  text-align: center;
  top: 50%;
  width: 100%;
  height: 57px;
  transform: translateY(-50%);
  box-shadow: 0 1px 1px black, 0 4px 14px rgba(0, 0, 0, 0.7);
  z-index: 1;
  background-color: #ddd;
  font-size: 14px;
}

.breadcrumb a {
  position: relative;
  display: flex;
  flex-grow: 1;
  text-decoration: none;
  margin: auto;
  height: 100%;
  padding-left: 38px;
  padding-right: 0;
  color: #666;
}

.breadcrumb a:first-child {
  padding-left: 15.2px;
}

.breadcrumb a:last-child {
  padding-right: 15.2px;
}

.breadcrumb a:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 57px;
  height: 57px;
  top: 0;
  right: -28.1481481481px;
  background-color: #ddd;
  border-top-right-radius: 5px;
  transform: scale(0.707) rotate(45deg);
  box-shadow: 1px -1px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.breadcrumb a:last-child:after {
  content: none;
}

.breadcrumb__inner {
  display: flex;
  flex-direction: column;
  margin: auto;
  z-index: 2;
}

.breadcrumb__title {
  font-weight: bold;
}

.breadcrumb a.active, .breadcrumb a:hover {
  background: #e02200;
  color: white;
}

.breadcrumb a.active:after, .breadcrumb a:hover:after {
  background: #e02200;
  color: white;
}

@media all and (max-width: 1000px) {
  .breadcrumb {
    font-size: 12px;
  }
}
@media all and (max-width: 710px) {
  .breadcrumb__desc {
    display: none;
  }

  .breadcrumb {
    height: 38px;
  }

  .breadcrumb a {
    padding-left: 25.3333333333px;
  }

  .breadcrumb a:after {
    content: "";
    width: 38px;
    height: 38px;
    right: -19px;
    transform: scale(0.707) rotate(45deg);
  }
}
</style>
</head>
<body>
  <div class="container">
	<div class="breadcrumb">
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Website Root</span>
				<span class="breadcrumb__desc">First Item</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 02</span>
				<span class="breadcrumb__desc">Second Item</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 03</span>
				<span class="breadcrumb__desc">Third Item</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 04</span>
				<span class="breadcrumb__desc">Fourth Item</span>
				<span class="breadcrumb__desc">With Additional Line</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 05</span>
			</span>
		</a>
	</div>
</div>
</body>
</html>

3. Flat Breadcrumb buttons

Made by Shawn G. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style>
.breadcrumb {
  line-height: 40px;
  font-size: 20px;
  height: 40px;
  margin: 0 10px 10px 0;
}
.breadcrumb > a {
  position: relative;
  display: inline-block;
  float: left;
  background: #2980b9;
  color: #fff;
  text-decoration: none;
  padding: 0 10px 0 20px;
  transition: all 0.1s ease-in-out;
}
.breadcrumb > a:before {
  content: "";
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  border-width: 20px 0 20px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #2980b9;
  transition: all 0.1s ease-in-out;
}
.breadcrumb > a:hover, .breadcrumb > a .active {
  background: #409ad5;
  color: #fff;
}
.breadcrumb > a:hover + a:before, .breadcrumb > a .active + a:before {
  border-color: transparent transparent transparent #409ad5;
}
.breadcrumb > a:first-child {
  border-radius: 4px 0 0 4px;
}
.breadcrumb > a:first-child:before {
  display: none;
}
.breadcrumb > a:last-child {
  padding-right: 20px;
  border-radius: 0 4px 4px 0;
}
.breadcrumb.red > a {
  background: #c0392b;
}
.breadcrumb.red > a + a:before {
  border-color: transparent transparent transparent #c0392b;
}
.breadcrumb.red > a:hover {
  background: #d65548;
}
.breadcrumb.red > a:hover + a:before {
  border-color: transparent transparent transparent #d65548;
}
.breadcrumb.green > a {
  background: #16a085;
}
.breadcrumb.green > a + a:before {
  border-color: transparent transparent transparent #16a085;
}
.breadcrumb.green > a:hover {
  background: #1ccdaa;
}
.breadcrumb.green > a:hover + a:before {
  border-color: transparent transparent transparent #1ccdaa;
}

/** Ignore below. It's for the title and background. :p */
* {
  font-family: "Open Sans", sans-serif;
}

body {
  background: #fff;
}

h1 {
  color: #555;
}

.wrapper {
  position: absolute;
  height: 150px;
  width: 500px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;
  z-index: 500;
}
</style>
</head>
<body>
  <div class="wrapper">
  <h1>Breadcrumbs</h1>
  <div class="breadcrumb">
    <a href="#!/">/</a>
    <a href="#!/cats">Cats</a>
    <a href="#!/cats/domestic-loghair">Domestic Longhair</a>
    <a href="#!/cats/domestic-loghair/diet">Diet</a>
  </div>
  <div class="breadcrumb red">
    <a href="#!/">/</a>
    <a href="#!/cats">Cats</a>
    <a href="#!/cats/domestic-loghair">Domestic Longhair</a>
    <a href="#!/cats/domestic-loghair/diet">Care</a>
  </div>
  <div class="breadcrumb green">
    <a href="#!/">/</a>
    <a href="#!/cats">Cats</a>
    <a href="#!/cats/domestic-loghair">Domestic Longhair</a>
    <a href="#!/cats/domestic-loghair/diet">Family</a>
  </div>
</div>

<!-- Ignore below. It's for the background. :p /-->
<div class="background">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>

4. Breadcrumbs Designs (Skewed, Border-radius, click effect)

Made by CodingDecoding. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body
{
  margin: 0;
  padding: 0;
  background: #222;
}

*
{
  font-family: poppins;
  text-decoration: none;
  user-select: none;
}

.center
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a
{
  color: #fff;
}

.crumb1 li
{
  display: inline-block;
  padding: 15px;
  background: #3399ff;
  transform: skew(-20deg);
  cursor: pointer;
  opacity: 0.8;
}

.crumb1 li:hover
{
  opacity: 1;
}

.crumb1 li a
{
  display: block;
  transform: skew(20deg);
}

.crumb2 li
{
  display: inline-block;
  padding: 15px;
  background: orange;
  cursor: pointer;
  opacity: 0.8;
}

.crumb2 li:hover
{
  opacity: 1;
}
  
.crumb3 li
{
  display: inline-block;
  padding: 15px;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 9px #999;
  border-radius: 7px;
}

.crumb3 li:active
{
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  background: #3e8e41;
}

.crumb3 li:hover
{
    background: #3e8e41;
}
</style>
</head>
<body>
  <div class="center">
<ul class="crumb1">
  <li><a href="#">Level 1</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Level 3</a></li>
  <li><a href="#">Level 4</a></li>
  <li><a href="#">Level 5</a></li>
</ul><br>

<ul class="crumb2">
  <li style="border-radius: 50px 0 0 50px; padding-left: 15px;"><a href="#">Level 1</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Level 3</a></li>
  <li><a href="#">Level 4</a></li>
  <li style="border-radius: 0 50px 50px 0; padding-right: 15px;"><a href="#">Level 5</a></li>
</ul><br>
  
 <ul class="crumb3">
  <li><a href="#">Level 1</a></li>
  <li><a href="#">Level 2</a></li>
  <li><a href="#">Level 3</a></li>
  <li><a href="#">Level 4</a></li>
  <li><a href="#">Level 5</a></li>
</ul>
  
</div>
</body>
</html>

5. Refactoring UI – Breadcrumbs

Made by David Lewis. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.breadcrumbs {
  border: 1px solid #cbd2d9;
  border-radius: 0.3rem;
  display: inline-flex;
  overflow: hidden;
}

.breadcrumbs__item {
  background: #fff;
  color: #333;
  outline: none;
  padding: 0.75em 0.75em 0.75em 1.25em;
  position: relative;
  text-decoration: none;
  transition: background 0.2s linear;
}

.breadcrumbs__item:hover:after,
.breadcrumbs__item:hover {
  background: #edf1f5;
}

.breadcrumbs__item:focus:after,
.breadcrumbs__item:focus,
.breadcrumbs__item.is-active:focus {
  background: #323f4a;
  color: #fff;
}

.breadcrumbs__item:after,
.breadcrumbs__item:before {
  background: white;
  bottom: 0;
  -webkit-clip-path: polygon(50% 50%, -50% -50%, 0 100%);
          clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.2s linear;
  width: 1em;
  z-index: 1;
}

.breadcrumbs__item:before {
  background: #cbd2d9;
  margin-left: 1px;
}

.breadcrumbs__item:last-child {
  border-right: none;
}

.breadcrumbs__item.is-active {
  background: #edf1f5;
}

/* Some styles to make the page look a little nicer */
body {
  color: #323f4a;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;

}

html, body {
  height: 100%;
}
</style>
</head>
<body>
  <nav class="breadcrumbs">
  <a href="#home" class="breadcrumbs__item">Home</a>
  <a href="#shop" class="breadcrumbs__item">Shop</a> 
  <a href="#cart" class="breadcrumbs__item">Cart</a>
  <a href="#checkout" class="breadcrumbs__item is-active">Checkout</a> 
</nav>
</body>
</html>

6. Tiny CSS3 Round Breadcrumb

Made by Renaud Tertrais. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 0 100px;
  background-color: #59A386;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

h1 {
  color: #77c2a5;
  font-weight: 400;
  padding: 50px 0;
}

ul.breadcrumb {
  margin-left: 50px;
  display: inline-block;
  list-style: none;
}
ul.breadcrumb li {
  float: right;
  padding: 5px;
  background-color: #59A386;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  margin-left: -50px;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin-top: 3px;
}
ul.breadcrumb li a {
  overflow: hidden;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration: none;
  height: 50px;
  color: #509378;
  background-color: #65BA99;
  text-align: center;
  min-width: 50px;
  display: block;
  line-height: 50px;
  padding-left: 52px;
  padding-right: 33.33333px;
  width: 50px;
}
ul.breadcrumb li a .icon {
  display: inline-block;
}
ul.breadcrumb li a .text {
  display: none;
  opacity: 0;
}
ul.breadcrumb li a:hover {
  width: 150px;
  background-color: #77c2a5;
}
ul.breadcrumb li a:hover .text {
  display: inline-block;
  opacity: 1;
}
ul.breadcrumb li:last-child a {
  padding: 0;
}
ul.breadcrumb li:last-child:hover {
  padding: 3px;
  margin-top: 0;
}
ul.breadcrumb li:last-child:hover a {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
</style>
</head>
<body>
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1>Tiny CSS3 breadcrumb</h1>
  
<ul class="breadcrumb">
  <li>
    <a href="#">
      <span class="icon icon-file"></span>
      <span class="text">file</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-folder-open"></span>
      <span class="text">folder</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-code"></span>
      <span class="text">CSS 3</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-beaker"></span>
      <span class="text">Lab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-home"></span>
    </a>
  </li>
</ul>
</body>
</html>

7. Fluid CSS Step Navigation

Made by Adrian Pelletier. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* Base
------------------------------------------------------------------------- */
			
	body {
		font: 14px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
		}  
	
/* Step Navigation
------------------------------------------------------------------------- */
	
	.stepNav {
	  margin: 30px 20px;
		height: 43px;
		padding-right: 20px;
		position: relative;
		z-index: 0;
		}
	
	/* z-index to make sure the buttons stack from left to right */
	
	.stepNav li {
		float: left;
		position: relative;
		z-index: 3;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.12);
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.12);
				    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
		}
		
	.stepNav li:first-child {
		-webkit-border-radius: 5px 0 0 5px;
		   -moz-border-radius: 5px 0 0 5px;
	   	      border-radius: 5px 0 0 5px;
		}
		
	.stepNav li:nth-child(2) { z-index: 1; }
	.stepNav li:nth-child(3) { z-index: 0; }
	
	/* different widths */
	
	.stepNav.twoWide li { width: 50%; }
	.stepNav.threeWide li { width: 33.33%; }
	
	   /* step links */
	
	.stepNav a, .stepNav a:visited {
		width: 100%;
		height: 43px;
		padding: 0 0 0 25px;
		color: #717171;
		text-align: center;
		text-shadow: 0 1px 0 #fff;
		line-height: 43px;
		white-space: nowrap;
		border: 1px solid #cbcbcb;
		text-decoration: none;
		border-top-color: #dddddd;
		border-right: 0;
		background-color: #fbfbfb;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(251, 251, 251)), to(rgb(233, 233, 233)));
		background-image: -webkit-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: -moz-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: -o-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: -ms-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
		float: left;
		position: relative;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			      box-sizing: border-box;
		}
		
	.stepNav li:first-child a {
		padding-left: 12px;
		-webkit-border-radius: 5px 0 0 5px;
		   -moz-border-radius: 5px 0 0 5px;
	   	      border-radius: 5px 0 0 5px;
		}
	
	.stepNav a:before {
		content: "";
		width: 29px;
		height: 29px;
		border-right: 1px solid #dddddd;
		border-bottom: 1px solid #cbcbcb;
		background-image: -webkit-gradient(linear, right top, left bottom, from(rgb(251, 251, 251)), to(rgb(233, 233, 233)));
		background-image: -webkit-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: -moz-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: -o-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: -ms-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
		background-image: linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
		display: block;
		position: absolute;
		top: 6px;
		right: -16px;
		z-index: -1;
		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
			 	    transform: rotate(-45deg);
		}
		
	.stepNav a:hover {
		color: #2e2e2e;
		background-color: #f5f5f5;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 242, 242)), to(rgb(217, 217, 217)));
		background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: -ms-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
		}
		
	.stepNav a:hover:before {
		background-image: -webkit-gradient(linear, right top, left bottom, from(rgb(242, 242, 242)), to(rgb(217, 217, 217)));
		background-image: -webkit-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: -moz-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: -o-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: -ms-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
		background-image: linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
		}
	
	/* selected */
		
	.stepNav li.selected {
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
				    box-shadow: none;
		}
								
	.stepNav li.selected a, .stepNav li.selected a:before {
		background: #ebebeb;
		}
		
	.stepNav li.selected a {
		border-top-color: #bebebe;
		-webkit-box-shadow: inset 2px 1px 2px rgba(0,0,0,0.12);
		   -moz-box-shadow: inset 2px 1px 2px rgba(0,0,0,0.12);
				    box-shadow: inset 2px 1px 2px rgba(0,0,0,0.12);
		}
		
	.stepNav li.selected a:before {
		border-right: 1px solid #bebebe;
		border-bottom: 1px solid #cbcbcb;
		-webkit-box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1);
		   -moz-box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1);
				    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1);
		}
</style>
</head>
<body>
  <ul class="stepNav twoWide">
  <li class="selected"><a href="" title="">Link</a></li>
	<li><a href="" title="">Link</a></li>
</ul>
<ul class="stepNav threeWide">
  <li><a href="" title="">Step 1</a></li>
	<li class="selected"><a href="" title="">Step 2</a></li>
	<li><a href="" title="">Step 3</a></li>
</ul>
</body>
</html>

8. Breadcrumb experiment

Made by Smooto. Source

CSS Breadcrumb by Smooto
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background-color: lightgray;
  margin: 0;
  padding-left: 20%;
  font-family: serif;
  font-size: 1em;
}

a {
  color: palevioletred;
}

.logo {
  margin-top: 25px;
  margin-left: 25px;
  margin-bottom: 0px;
}

.logo img {
  display: inline-block;
  height: 130px;
  width: 100px;
}

.logo p {
  display: inline-block;
  position: relative;
  top: -35px;
  font-size: 3em;
  color: palevioletred;
}

main {
  position: relative;
  top: -50px;
  width: 75%;
}

.breadcrumbs {
  position: relative;
  z-index: 999;
}

.breadcrumbs li {
  position: relative;
  display: inline-block;
  background-color: lightgray;
  margin: 5px 15px;
  padding: 5px 10px;
  border-top: 2px solid palevioletred;
  border-bottom: 2px solid palevioletred;
}

.breadcrumbs .first-crumb {
  border-left: 2px solid palevioletred;
  margin-right: 7px;
}

.breadcrumbs li:not(.first-crumb):not(.last-crumb)::before {
  position: absolute;
  border: 2px solid palevioletred;
  background-color: lightgray;
	content: "";
	left: -10%;
	top: -2px;
	height: 100%;
	width: 90%;
  -webkit-transform: skewX(-27deg);
	   -moz-transform: skewX(-27deg);
	    -ms-transform: skewX(-27deg);
	        transform: skewX(-27deg);
  z-index: -2;
}

.breadcrumbs li:not(.last-crumb)::after {
  position: absolute;
  border: 2px solid palevioletred;
  background-color: lightgray;
	content: "";
	right: -15%;
	top: -2px;
	height: 100%;
	width: 90%;
  -webkit-transform: skewX(-27deg);
	   -moz-transform: skewX(-27deg);
	    -ms-transform: skewX(-27deg);
	        transform: skewX(-27deg);
  z-index: -2;
}

.breadcrumbs .last-crumb {
  background-color: palevioletred;
  color: lightgray;
}

.breadcrumbs .last-crumb::before {
  position: absolute;
  border: 2px solid palevioletred;
  background-color: palevioletred;
	content: "";
	left: -9%;
	top: -2px;
	height: 100%;
	width: 90%;
  -webkit-transform: skewX(-27deg);
	   -moz-transform: skewX(-27deg);
	    -ms-transform: skewX(-27deg);
	        transform: skewX(-27deg);
  z-index: -1;
}

section {
  margin: 0px 60px;
  outline: 2px solid palevioletred;
  outline-offset: 35px;
}
</style>
</head>
<body>
  <body>
  <header class="logo">
    <img src="https://i.ibb.co/CsPr8qd/kissclipart-rosas-negras-dibujos-clipart-black-rose-drawing-591259c26cd99ef7.png" alt="kissclipart-rosas-negras-dibujos-clipart-black-rose-drawing-591259c26cd99ef7" border="0">
    <p>Anarchy Code Lab</p>
  </header>
  <main>
    <nav class="breadcrumbs">
      <ul>
        <li class="first-crumb"><a href="#">Home</a></li>
        <li><a href="#">Personal Work</a></li>
        <li><a href="#">Experiments</a></li>
        <li class="last-crumb">Incremental Game</li>
      </ul>
    </nav>
    <section>
      <header>
        <h1>Incremental Game Experiment</h1>
      </header>
      <p>
        Page content goes here
      </p>
    </section>
  </main>
</body>
</html>