Breadcrumb Blog Navigation with Categories

What does this code do?

These code snippets will automatically add breadcrumb navigation links to the beginning of every Squarespace blog post. The link will include Blog > Category > Blog Title.

Note: This is a design feature only. This is not the same thing as Breadcrumb Code for SEO.

Squarespace 7.0

Step 1: Page Header Code Injection

Copy and paste this code into Pages > Blog Page Gear Icon > Advanced > Page Header Code Injection

<!-- Breadcrumb With Categories -->
<div id="breadcrumb">
  <a href="BLOGURL">Blog</a> 
  <a href="#" class="preSlide slideIn" id="breadcrumbCategory">category</a> 
  <a href="#" id="breadcrumb-blog-title"></a>
</div>

Then edit your blog page name and url. This can also be changed to go to any page you would like.

Note: If you have more than one blog, you can repeat the above step for all of your blog pages.

Step 2: Footer Code Injection

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Breadcrumb With Categories -->
<script>
window.Squarespace.onInitialize(Y,function(){if(document.querySelector(".BlogItem-title")){var e=document.getElementById("breadcrumb");e.style.display="flex";var t=document.getElementById("breadcrumb-blog-title"),r=document.querySelector(".BlogItem-title");t.innerHTML=r.innerHTML,r.prepend(e);for(var l=document.querySelector(".Main--blog-item .BlogItem").getAttribute("class").split(" "),n=[],o=0;o<l.length;o++)if(-1!==l[o].indexOf("category-")){var a=l[o].replace("category-","");n.push(a)}for(o=0;o<n.length;o++)n[o]=n[o].charAt(0).toUpperCase()+n[o].substr(1);var c=document.querySelector("#breadcrumbCategory");c.innerHTML=n[0],c.href="/blog/category/"+n[0]}})();
</script>

If your blog does not have the url “/blog” then you will need to edit the link in the code above (at the end in green).

Step 3: CSS

Copy and paste the following in Design > Custom CSS

/* Breadcrumb */
#breadcrumb {
  margin-bottom: 10vw; // space between breadcrumb and title on mobile
  text-align: left;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

@media only screen and (min-width:640px) {
 #breadcrumb {
  margin-left: 0vw;
  margin-bottom: 7vw; // space between breadcrumb and title on desktop
  margin-top: 2vw; // space above the breadcrumb on desktop
}
}
#breadcrumb a {
    font-size: 1.2rem; // font size of the links
    color: black; // color of the links
    border-bottom: none !important; //remove link underline
  }

#breadcrumb  a:hover {
  color: grey !important; // color of links on hover
}

#breadcrumb a:not(:last-child):after {
  content:"\203A"; // arrow between links
  margin: 0 10px; // spacing between arrow and links
}

Customize the spacing and colours of the breadcrumb.

To change the arrow, check out https://www.fileformat.info/info/unicode/block/arrows/list.htm and switch 203A with one of the number combinations in the list.

Squarespace 7.1

Step 1: Post Blog Item Code Injection

Copy and paste this code into Pages > Blog Page Gear Icon > Advanced > Post Blog Item Code Injection

<!-- Breadcrumb With Categories -->
<div id="breadcrumb">
  <a href="BLOGURL">Blog</a> 
  <a href="#" class="preSlide slideIn" id="breadcrumbCategory"></a> 
  <a href="#" id="breadcrumb-blog-title"></a>
</div>

<script>
document.addEventListener("DOMContentLoaded",function(e){var t=document.getElementById("breadcrumb"),r=document.querySelector(".blog-item-top-wrapper"),n=document.getElementById("breadcrumb-blog-title"),o=r.querySelector("h1");r.prepend(t),n.innerHTML=o.innerHTML;var d=document.querySelector(".blog-item-category").cloneNode(!0);document.querySelector("#breadcrumbCategory").appendChild(d),t.style.display="flex"});
</script>

Then insert your blog name and url.

Note: If you have more than one blog, you can repeat the above step for all of your blog pages.

Step 2: Custom CSS

Copy and paste the following in Design > Custom CSS

/* Breadcrumb */
#breadcrumb {
  margin-bottom: 10vw; // space between breadcrumb and title on mobile
  text-align: left;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

@media only screen and (min-width:640px) {
 #breadcrumb {
  margin-left: 0vw;
  margin-bottom: 7vw; // space between breadcrumb and title on desktop
  margin-top: 2vw; // space above the breadcrumb on desktop
}
}
#breadcrumb a {
    font-size: 1.2rem; // font size of the links
    color: black; // color of the links
    background-image: none !important;
  }

#breadcrumb  a:hover {
  color: grey !important; // color of links on hover
}

#breadcrumb a:not(:last-child):after {
  content:"\203A"; // arrow between links
  margin: 0 10px; // spacing between arrow and links
}

Customize the spacing and colours of the breadcrumb.

To change the arrow, check out https://www.fileformat.info/info/unicode/block/arrows/list.htm and switch 203A with one of the number combinations in the list.

How To Use It

1. Copy and paste the code snippet as indicated above.

2. Insert your blog name and url.

3. Customize the spacing and colours of the breadcrumb.

4. To change the arrow, check out https://www.fileformat.info/info/unicode/block/arrows/list.htm and switch 203A with one of the number combinations in the list. For example if I wanted the breadcrumb to look like this:

Home → Blog

I would change it from content:"\203A"; to content:"\2192";