How to Create Breadcrumb Navigation in HTML

Breadcrumbs Image

How to Create Breadcrumb Navigation in HTML. So, in this tutorial, we will how to create a breadcrumb using HTML and CSS. First of all, we need to know what is breadcrumb and why we use them into our website/blogs.

What is the Breadcrumb Navigation?

Breadcrumbs are a dependent navigation assistant which helps the users easily read the relation between their location on a page and higher-level pages. The phrase is used from the tale of Hansel and Gretel where the kids drop a trail of breadcrumbs to track their way back. With breadcrumbs, if you’ve reached a page you don’t want to be there, then you can easily find your route back. Breadcrumbs are not completely website-only elements. Microsoft has introduced Breadcrumbs in Windows Vista and it has been a feature since then in every Windows edition.

Why breadcrumb is important for SEO?

A breadcrumb track is a helpful tool for both web developers and SEO experts. It also helps Google bots to properly understand the website hierarchy, and it helps users to understand their current position on the site.
However, not all websites implement this navigation tool. Possibly many do not consider it to be necessary because of its minor and unclear impact on SEO.

So, let’s begin to create a breadcrumb to make our website handsome.

<div class="soft-breadcrumb">
	<a href="#" class="active">Home</a>
	<a href="#">Services</a>
	<a href="#">Order</a>
	<a href="#">Confirmation</a>
	<a href="#">Placed</a>
</div>

CSS CODE:

<style>
* {margin: 0; padding: 0;}
body {
	text-align: center;
	font-family: 'Merriweather Sans', arial, verdana;
	float:left;
}
.soft-breadcrumb {
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	counter-reset: flag; 
}
.soft-breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	padding: 0 10px 0 60px;
	background: #66144b;
	background: linear-gradient(#66144b, #333);
	position: relative;
}
.soft-breadcrumb a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px;
}
.soft-breadcrumb a:first-child:before {left: 14px;}
.soft-breadcrumb a:last-child {
	border-radius: 0 5px 5px 0; 
	padding-right: 20px;
}
.soft-breadcrumb a.active, .soft-breadcrumb a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.soft-breadcrumb a.active:after, .soft-breadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}
.soft-breadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; 
	width: 36px; 
	height: 36px;
	/* 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	z-index: 1;
	background: #66144b;
	background: linear-gradient(135deg, #66144b, #333);
	box-shadow: 
	2px -2px 0 2px rgba(0, 0, 0, 0.4), 
	3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
	5px - for rounded arrows and 
	50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
.soft-breadcrumb a:last-child:after {
	content: none;
}
.soft-breadcrumb a:before {
	content: counter(flag);
	counter-increment: flag;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #5c1f66;
	background: linear-gradient(#5c1f66, #000);
	font-weight: bold;
}
</style>

Now our good style breadcrumbs active. You just need to create a file like index.html and copy above HTML and CSS code and paste it into your HTML file. So, open your file in the browser and see magic. If you want to add this breadcrumb you just need to put this code into your article where you want or place it into your web index.html file below the body tag. Please let’s know, in the comment section how this article was helpful for you.