Breadcrumb Design

In this example below you will see how to do a Breadcrumb Design with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by raeesh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright raeesh ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Breadcrumb Design</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="breadcrumb-design">
  <li class="active"><a href="#"><span>Home</span></a></li>
  <li><i></i></li>
  <li><a href="#"><span>About Us</span></a></li>
  <li><i></i></li>
  <li><a href="#"><span>Contact Us</span></a></li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/raeesh/breadcrumb-design-pVPOaq */
.breadcrumb-design{
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: inline-block;
	padding-right: 10px;
	padding-left: 10px;
  font-family:"Arial"
}
.breadcrumb-design li{
	float: left;
	display: inline-block;
	position: relative;
	margin-left: 3px;
	transform: skew(-30deg);
}
.breadcrumb-design li i{
	display: block;
	width: 2px;
	height: 34px;
	background: #000;
}
.breadcrumb-design li a{
	position: relative;
	display: block;
	background: #000;
	color: #fff;
	text-decoration: none;
	padding: 0px 20px 0px 20px;
	margin: 0px;
	height: 34px;
	line-height: 34px;
  transition: 400ms;
}
.breadcrumb-design li:last-child a{
  padding-right: 7px;
}
.breadcrumb-design li:last-child a:after{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 0;
	border-left: 7px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 34px solid #000;
	z-index: 0;
  transition: 400ms;
}
.breadcrumb-design li:last-child:hover a:after{
  border-bottom: 34px solid orange;
}
.breadcrumb-design li.active a,
.breadcrumb-design li a:hover{
	background: orange;
}
.breadcrumb-design li a span{
	display: inline-block;
	transform: skew(30deg);
}

Comments