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, you need to know what is breadcrumb and why we use them on websites/blogs.
What is the Breadcrumb Navigation?
Breadcrumbs are a dependent navigation assistant which helps users easily read the relation between their location on a page and higher-level pages. The phrase is used in 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 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.
Read More: Learn HTML Online.
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 breadcrumb is active. You just need to create a file like index.html and copy the 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.
I hope this article was helpful for you to make amazing breadcrumbs for your website.