Breadcrumb Blog Navigation

What does this code do?

These code snippets will automatically add breadcrumb navigation links to the beginning of every Squarespace blog post. The links added to the top at Home > Blog > Blog Title. If you would like the breadcrumb to be Blog > Category > Blog Title check out this code snippet.

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 -->
<div id="breadcrumb">
  <a href="HOME URL">Home</a> 
  <a href="BLOG URL" class="preSlide slideIn">Blog</a> 
  <a href="#" id="breadcrumb-blog-title"></a>
</div>

Then insert your home and blog page urls.

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 -->
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  
if (document.querySelector(".BlogItem-title")) {
  var breadcrumb = document.getElementById("breadcrumb");
  breadcrumb.style.display = "flex";
  var breadcrumbBlogTitle = document.getElementById("breadcrumb-blog-title");
  var blogTitle= document.querySelector(".BlogItem-title");
  breadcrumbBlogTitle.innerHTML = blogTitle.innerHTML;
  blogTitle.prepend(breadcrumb);
 }
})
</script>

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 -->
<div id="breadcrumb">
  <a href="HOME URL">Home</a> 
  <a href="BLOG URL" class="preSlide slideIn">Blog</a> 
  <a href="#" id="breadcrumb-blog-title"></a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(event) {
  var breadcrumb = document.getElementById("breadcrumb");
  breadcrumb.style.display = "flex";
  var blogTitle= document.querySelector(".blog-item-top-wrapper");
  var breadcrumbBlogTitle = document.getElementById("breadcrumb-blog-title");
  var title= blogTitle.querySelector("h1");

  blogTitle.prepend(breadcrumb);
  breadcrumbBlogTitle.innerHTML = title.innerHTML;
})
</script>

Then insert your home and blog page urls.

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 home page url and blog page 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";