This is the simple breadcrumb navigation it is used to navigate previous pages links and also gives the current page in the website. Breadcrumb navigation one of the useful navigation to the user and also it is the seo friendly because it is act like a internal link building.
This is very simple to create you just follow the below css code to display the breadcrumb navigation bar, You can design various types of breadcrumb navigation bar usig the html and css. In this example i provided simple and nice breadcrumb design using html and css, Here also provided the demo link to check out the result of the example and also provided the download button download the code. I hope this simple concept will really helpful.
<html>
<head>
<title>simple Breadcrumb Design using css</title>
<style>
#my-breadcrumbs ul li {
list-style:none;
}
#my-breadcrumbs ul li a {
display: block;
float: left;
height: 30px;
background: #3060A5;
text-align: center;
padding: 7px 30px 0 30px;
position: relative;
margin: 0 36px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 20px;
text-decoration: none;
color: #fff;
}
#my-breadcrumbs ul li a:hover{
background: #5172B8;
}
#my-breadcrumbs ul li a:after {
content: "";
border-top: 20px solid transparent;
border-bottom: 17px solid transparent;
border-left: 30px solid #3060A5;
position: absolute;
right: -30px;
top: 0;
}
#my-breadcrumbs ul li a:before {
content: "";
position: absolute;
margin-top: -7px;
border-width: 18px 0 19px 30px;
border-style: solid;
border-color: #3060A5 #3060A5 #3060A5 transparent;
left: -30px;
}
/* Hover Effects */
#my-breadcrumbs ul li a:hover::before {
border-color: #5172B8 #5172B8 #5172B8 transparent;
}
/* Hover Effects */
#my-breadcrumbs ul li a:hover::after{
border-top: 20px solid transparent;
border-bottom: 17px solid transparent;
border-left: 30px solid #5172B8;
}
/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
display: none;
}
/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
border-top-left-radius: 10px; border-bottom-left-radius: 10px;border-bottom-right-radius: 1px;
}
</style>
</head>
<body>
<div id="my-breadcrumbs">
<ul style="height: 100px;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About our company</a></li>
<li><a href="#">Vision</a></li>
</ul>
</div>
</body>
</html>
<head>
<title>simple Breadcrumb Design using css</title>
<style>
#my-breadcrumbs ul li {
list-style:none;
}
#my-breadcrumbs ul li a {
display: block;
float: left;
height: 30px;
background: #3060A5;
text-align: center;
padding: 7px 30px 0 30px;
position: relative;
margin: 0 36px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 20px;
text-decoration: none;
color: #fff;
}
#my-breadcrumbs ul li a:hover{
background: #5172B8;
}
#my-breadcrumbs ul li a:after {
content: "";
border-top: 20px solid transparent;
border-bottom: 17px solid transparent;
border-left: 30px solid #3060A5;
position: absolute;
right: -30px;
top: 0;
}
#my-breadcrumbs ul li a:before {
content: "";
position: absolute;
margin-top: -7px;
border-width: 18px 0 19px 30px;
border-style: solid;
border-color: #3060A5 #3060A5 #3060A5 transparent;
left: -30px;
}
/* Hover Effects */
#my-breadcrumbs ul li a:hover::before {
border-color: #5172B8 #5172B8 #5172B8 transparent;
}
/* Hover Effects */
#my-breadcrumbs ul li a:hover::after{
border-top: 20px solid transparent;
border-bottom: 17px solid transparent;
border-left: 30px solid #5172B8;
}
/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
display: none;
}
/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
border-top-left-radius: 10px; border-bottom-left-radius: 10px;border-bottom-right-radius: 1px;
}
</style>
</head>
<body>
<div id="my-breadcrumbs">
<ul style="height: 100px;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About our company</a></li>
<li><a href="#">Vision</a></li>
</ul>
</div>
</body>
</html>
0 Comments