Add a breadcrumb to Blog Category & Tag pages

Jan 18

Add a breadcrumb on your Blog Category & Tag Pages to give your user a visual reference to where they are on your website.

When you click on a tag or category from a blog post, you’re taken to a page with all of the blog articles with the same tag or category. Squarespace doesn’t allow for us to natively edit this page, so we have to use to some tricks to get us there.

This code checks to see if a user is on one of these pages, and if so, inserts a breadcrumb above the articles.

Demo

Usage

First, be sure you have created a section above your Blog Items on your main Blog Collection page.

Next, add a code block into that section with the indicated code below.

Then, add the Javascript to the blog collection Settings » Advanced » Page Header Code Injection area.

And Finally, add the CSS to your Design » Custom CSS area.

Whenever you go to your blogs category or tag page, you should see the filtered item appear in the code block.

Customize

Feel free to change the color properties to match your site styles. If you wish to change the text style from the code’s default of h4, change all references to h4 in the javascript.

The Code

Blog Collection Page Section » Code Block

  
<div id="filter-results"></div>

Blog Collection Settings » Advanced » Page Header Code Injection Area

  
<!-- Add Breadcrumb to Blog Collection Page -->
<script>
  (function () {
    /*
     *  Function to build breadcrumb on Tab & Category Pages
     */
    function addCrumb() {
      /*Get the URL path of the current page*/
      let pathname = document.location.pathname;

      /*If Page is a Category Page*/
      if (pathname.includes("/category/")) {
        let category = decodeURIComponent(pathname.split("/category/")[1].replaceAll("+", " ")),
          el = document.querySelector("#filter-results"),
          filter = `<h4 id="crumb" class="category">
             <span class="text">Category: </span>
             <span class="filter">${category}</span>
           </h4>`;

        el.innerHTML = filter;
      }

      /*If Page is a Tag Page*/
      if (pathname.includes("/tag/")) {
        let tag = decodeURIComponent(pathname.split("/tag/")[1].replaceAll("+", " ")),
          el = document.querySelector("#filter-results"),
          filter = `<h4 id="crumb" class="tag">
             <span class="text">Tag: </span>
             <span class="filter">${tag}</span>
           </h4>`;

        el.innerHTML = filter;
      }
    }

    /*
     *  Listens for the page to load.
     */
    window.addEventListener("DOMContentLoaded", addCrumb);
  })();
</script>
  

Design » Custom CSS area

  
/**
* Category & Tag Collection Page 
* Breadcrumb Text
**/
    
#crumb {
  margin:0;
}
/*Text*/
#crumb .text{
  color:hsla(0,0%,0%,.75);
}
/*Active Category or Tag*/
#crumb .filter {
  color:black;
  text-decoration:underline;
}
  

References

Thanks to Christy Price for working on this tutorial with me.