Weebly Tutorial: How To Create Breadcrumbs

Breadcrumbs help visitors to your blog navigate your posts by automatically displaying the post their viewing and what page that post can be found under. This tutorial will show you how to install breadcrumbs into a Weebly "Blog" page.

Step 1: Add HTML Code

Go to "Theme" at the top and select "Edit HTML/CSS" in the bottom-left corner.

On the left, under "PARTIALS", select "blog>post.tpl". On the right, directly above the white "{{#custom_header_html}}" mustache code, add the HTML code below:

<div id="crumbs">
    <a class="crumb-line-1"></a>
    <div class="crumb-slash">></div>
    <a class="crumb-line-2"></a>
</div>

Step 2. Add CSS Codes

On the left, under "STYLES", select "main.less". On the right, scroll all the way to the bottom and add the CSS codes below:

​/* Bread Crumbs */
#crumbs {
    display:flex;
    align-items:center;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: .3px;
    color: #008aff;
}
.wsite-blog-index #crumbs {
    display:none;
}
.crumb-slash {
    color: #008aff;
    padding: 0 5px;
    box-sizing: border-box;
}
#crumbs a {
    color:#008aff;
}
#crumbs a:hover {
    text-decoration:underline;
}

Step 3: Add jQuery Codes

On the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function(){" code, add the jQuery codes below:

// Breadcrumbs  
var pathname = window.location.pathname;
var hyphenRemove = pathname.replace(/\-/g, ' ');
var arr = hyphenRemove.split('/');
  
// Blog URL
$(".crumb-line-1").html(arr[1]);
var slashRemove = (pathname.split('/').slice(0,2).join('/'));
$('.crumb-line-1').attr('href', slashRemove);
  
// Blog Page URL
$(".crumb-line-2").html(arr[2]);
$('.crumb-line-2').attr('href', pathname);

Click "SAVE".