Internal site structure is one of the important SEO factors that help Google and other search engines easily understand your site. Besides linking other pages on your site, adding breadcrumbs can help users to navigate to different sections. If you don’t know about breadcrumb, it is an additional navigational link, generally displayed on top of the webpage containing the structure. It helps users navigate to the upper-level categories or sections of the site easily from the current page.
Before we start, the prerequisite for a breadcrumb is to keep your pages in a structured manner. Though there is no need of arranging pages as per the breadcrumb we strongly recommend to do maintaining the needed hierarchy under the “Pages” tab and aligning your navigation accordingly. We will explain with an example structure as “Home > Site Building > Weebly > Weebly Tips & Tricks > This Page”. This needs five blocks with corresponding links to create a breadcrumb.
There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.
Table of Contents
Features:
- Light Weight.
- Pure CSS Code.
- Cross Browser.
- No External Files.
- Fully Customizable.
- Responsive.
How To Add 6 Stylish And Awesome Pure CSS Breadcrumbs Widgets?
There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.
CSS:
<style>
.breadcrumb{text-align:center;display:inline-block;box-shadow:0 0 15px 1px rgba(0,0,0,0.35);overflow:hidden;border-radius:5px;counter-reset:flag}
.breadcrumb a{text-decoration:none;outline:none;display:block;float:left;font-size:12px;line-height:36px;color:#fff;padding:0 10px 0 60px;background:#666;background:linear-gradient(#666,#333);position:relative}
.breadcrumb a:first-child{padding-left:46px;border-radius:5px 0 0 5px}
.breadcrumb a:first-child:before{left:14px}
.breadcrumb a:last-child{border-radius:0 5px 5px 0;padding-right:20px}
.breadcrumb a.active,.breadcrumb a:hover{background:#333;background:linear-gradient(#333,#000)}
.breadcrumb a.active:after,.breadcrumb a:hover:after{background:#333;background:linear-gradient(135deg,#333,#000)}
.breadcrumb a:after{content:'';position:absolute;top:0;right:-18px;width:36px;height:36px;transform:scale(0.707) rotate(45deg);z-index:1;background:#666;background:linear-gradient(135deg,#666,#333);box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);border-radius:0 5px 0 50px}
.breadcrumb a:last-child:after{content:none}
.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:#444;background:linear-gradient(#444,#222);font-weight:700}
.flat a,.flat a:after{background:#fff;color:#000;transition:all .5s}
.flat a:before{background:#fff;box-shadow:0 0 0 1px #ccc}
.flat a:hover,.flat a.active,.flat a:hover:after,.flat a.active:after{background:#9EEB62}
ul,li{list-style-type:none!important;padding:0;margin:0}
.breadcrumbs1{border-bottom:1px solid #ccc;background-color:#fff;line-height:20px;overflow:auto;font-size:16px;font-weight:700}
.breadcrumbs1 li{float:left;padding-left:8px}
.breadcrumbs1 li a{padding:0 24px 2px 0;background:transparent url(https://img.webnots.com/2015/07/bread_arrow1.png) no-repeat right center}
.breadcrumbs1 li a:link,#breadcrumbs1 li a:visited{text-decoration:none;color:#036}
.breadcrumbs1 li a:hover,#breadcrumbs1 li a:focus{text-decoration:underline;color:#09C}
.breadcrumbs1 li{color:#F90}
.breadcrumbs2{list-style:none!important;overflow:hidden;font-size:16px}
.breadcrumbs2 li{float:left}
.breadcrumbs2 li a{color:#fff;text-decoration:none;padding:10px 0 10px 65px;background:#a52a2a;background:hsla(34,85%,35%,1);position:relative;display:block;float:left}
.breadcrumbs2 li a:after{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid hsla(34,85%,35%,1);position:absolute;top:50%;margin-top:-50px;left:100%;z-index:2}
.breadcrumbs2 li a:before{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #fff;position:absolute;top:50%;margin-top:-50px;margin-left:1px;left:100%;z-index:1}
.breadcrumbs2 li:first-child a{padding-left:10px}
.breadcrumbs2 li:nth-child(2) a{background:hsla(34,85%,45%,1)}
.breadcrumbs2 li:nth-child(2) a:after{border-left-color:hsla(34,85%,45%,1)}
.breadcrumbs2 li:nth-child(3) a{background:hsla(34,85%,55%,1)}
.breadcrumbs2 li:nth-child(3) a:after{border-left-color:hsla(34,85%,55%,1)}
.breadcrumbs2 li:nth-child(4) a{background:hsla(34,85%,65%,1)}
.breadcrumbs2 li:nth-child(4) a:after{border-left-color:hsla(34,85%,65%,1)}
.breadcrumbs2 li:nth-child(5) a{background:hsla(34,85%,75%,1)}
.breadcrumbs2 li:nth-child(5) a:after{border-left-color:hsla(34,85%,75%,1)}
.breadcrumbs2 li:last-child a{color:#000;pointer-events:none;cursor:default}
.breadcrumbs2 li a:hover{background:hsla(34,85%,25%,1)}
.breadcrumbs2 li a:hover:after{border-left-color:hsla(34,85%,25%,1)!important}
ul{margin:0;padding:0;list-style:none!important}
.breadcrumbs3{background:#eee;border-width:1px;border-style:solid;border-color:#f5f5f5 #e5e5e5 #ccc;border-radius:5px;box-shadow:0 0 2px rgba(0,0,0,.2);overflow:hidden;font-size:16px}
.breadcrumbs3 li{float:left}
.breadcrumbs3 a{padding:.7em 1em .7em 2em;float:left;text-decoration:none;color:#444;position:relative;text-shadow:0 1px 0 rgba(255,255,255,.5);background-color:#ddd;background-image:linear-gradient(to right,#f5f5f5,#ddd)}
.breadcrumbs3 li:first-child a{padding-left:1em;border-radius:5px 0 0 5px}
.breadcrumbs3 a:hover{background:#fff}
.breadcrumbs3 a::after,.breadcrumbs3 a::before{content:"";position:absolute;top:50%;margin-top:-1.5em;border-top:1.5em solid transparent;border-bottom:1.5em solid transparent;border-left:1em solid;right:-1em}
.breadcrumbs3 a::after{z-index:2;border-left-color:#ddd}
.breadcrumbs3 a::before{border-left-color:#ccc;right:-1.1em;z-index:1}
.breadcrumbs3 a:hover::after{border-left-color:#fff}
.breadcrumbs3 .current,.breadcrumbs3 .current:hover{font-weight:700;background:none}
.breadcrumbs3 .current::after,.breadcrumbs3 .current::before{content:normal}
#breadcrumbs4{font:16px Arial,Helvetica,sans-serif;background-image:url(https://img.webnots.com/2015/07/Bread_Separator.png);background-repeat:repeat-x;height:30px;line-height:30px;color:#9b9b9b;border:solid 1px #cacaca;overflow:hidden;margin:0;padding:0}
#breadcrumbs4 li{list-style-type:none!important;float:left;padding-left:10px}
#breadcrumbs4 a{height:30px;display:block;background-image:url(https://img.webnots.com/2015/07/bread_arrow.png);background-repeat:no-repeat;background-position:right;padding-right:15px;text-decoration:none;color:#454545}
.home{border:none;margin:8px 0}
#breadcrumbs4 a:hover{color:#35acc5}
</style>HTML:
<!-- HTML Code for Breadcrumb Style 1 --> <h4>CSS Breadcrumb Style 1</h4> <div class="breadcrumb"> <a href="#" class="active">Home</a> <a href="#">Site Building</a> <a href="#">Weebly</a> <a href="#">Weebly Tips & Tricks</a> <a href="#">Current Page Title</a> </div> <!-- HTML Code for Breadcrumb Style 2 --> <h4>CSS Breadcrumb Style 2</h4> <div class="breadcrumb flat"> <a href="#" class="active">Home</a> <a href="#">Site Building</a> <a href="#">Weebly</a> <a href="#">Weebly Tips & Tricks</a> <a href="#">Current Page Title</a> </div> <!-- HTML Code for Breadcrumb Style 3 --> <h4>CSS Breadcrumb Style 3</h4> <ul class="breadcrumbs1"> <li><a href="#">Home</a></li> <li><a href="#">Site Building</a></li> <li><a href="#">Weebly</a></li> <li><a href="#">Weebly Tips & Tricks</a></li> <li>Current Page</li> </ul> <!-- HTML Code for Breadcrumb Style 4 --> <h4>CSS Breadcrumb Style 4</h4> <ul class="breadcrumbs2"> <li><a href="#">Home</a></li> <li><a href="#">Site Building</a></li> <li><a href="#">Weebly</a></li> <li><a href="#">Weebly Tips & Tricks</a></li> <li><a href="#">Current Page Title</a></li> </ul> <!-- HTML Code for Breadcrumb Style 5 --> <h4>CSS Breadcrumb Style 5</h4> <ul class="breadcrumbs3"> <li><a href="#">Home</a></li> <li><a href="#">Site Building</a></li> <li><a href="#">Weebly</a></li> <li><a href="#">Weebly Tips & Tricks</a></li> <li><a href="#" class="current">Current Page Title</a></li> </ul> <!-- HTML Code for Breadcrumb Style 6 --> <h4>Bonus CSS Breadcrumb Style 6</h4> <ul id="breadcrumbs4"> <li><a href="#" title="Home"><img src="https://img.webnots.com/2015/07/Bread_home.png" alt="Home" class="home" /></a></li> <li><a href="#" title="Sample page 1">Site Building</a></li> <li><a href="#" title="Sample page 2">Weebly</a></li> <li><a href="#">Weebly Tips & Tricks</a></li> <li>Current Page Title</li> </ul>
Customization:
No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Remember to add JavaScript after HTML code.
Troubleshooting the Errors:
Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.
Final Words:
That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.
Be the first to write a comment.