Breadcrumb at the start of every blog post.

October 9, 2019

Hello everyone. I am trying to add something to the start of all my blog posts. Specifically a code block with my breadcrumb in it. I am unsure how to do this in a smart way, as i am not the one writing my blog posts, so i just want the breadcrumb to be there no matter who makes the post.

Seems weird to me that you're not able to put in something that'll appear on all blog posts.

colin.irwin · October 9, 2019

What would the structure of the breadcrumb be?

October 9, 2019

Like this, but at the start of all blog posts. - With a layer more of course.

So its like: Home / Knowledge / Compliance blog / "Blog post name"

https://gyazo.com/288c48964182256bc63c0e9d7d286a23

<div class="ge-breadcrumb">
<ul class="breadcrumb">
<li><a href="/home">Home</a></li>
<li><a href="/knowledge">Knowledge</a></li>
<li><a href="/blog">Compliance Blog</a></li>
<li class="active">Blog post</li>
</ul>
</div>

Edited October 9, 2019 by GotEthics
Typo

yh3 · January 31, 2021

did you manage to get this to work? also trying to get breadcrumbs working for blog...

sinan · February 2, 2021

Hi everyone. Is there any update on this topic? I am also trying to add breadcrumbs to all my blog posts. It's actually very frustrating that Squarespace does not provide this simple feature. Hope they consider adding it in the upcoming product updates.

colin.irwin · February 2, 2021

The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages.

This is just for the news section, which is a blog.

First the JavaScript (this requires jQuery to be installed). Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){

window.Squarespace.onInitialize(Y, function(){  
	processBreadcrumbs();
});

function processBreadcrumbs() {
  var thisPath = window.location.pathname;
  var thisPage;
  var breadcrumbLink;
  if (thisPath.includes('/news')) {
    $('.BlogItem-title').addClass('pad-site');
    thisPage = $('.BlogItem-title').text();
      $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>');
  }
}

Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site.

The second class, .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated. It looks like this:

The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links.

The Custom CSS

.pad-site {
  padding-top: 34px;
  font-size: 28px;
}

.truncate {
  display: inline-block;
  width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

[id^="breadcrumb"] {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: .1em;
  a {
    color: @black;
    border-bottom: 1px dotted @black;
    &:hover {
      opacity:0.8;
    }
  }
}

Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly.

Edited February 2, 2021 by colin.irwin

houghtoncreative · March 22, 2022

Cheers @colin.irwin

Here's it working on 7.1

<script>$(document).ready(function(){  
  var thisPath = window.location.pathname;
  var thisPage;
  var breadcrumbLink;
    thisPage = $('.blog-item-title').text();
      $('.blog-item-top-wrapper').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>');
});
</script>

mazmac · September 28, 2022

Hello @houghtoncreative

Can you share how eas the install in 7.1? Still figuring out the installation

Thanks

tuanphan · September 30, 2022

On 9/29/2022 at 3:19 AM, mazmac said:

Can you share how eas the install in 7.1? Still figuring out the installation

Thanks

Add that code to Code Injection > Footer

mazmac · October 20, 2022

@tuanphanHello

I think I resolve it by accident, I have a breadcrumb in each post in my blog but looks pretty bad. I ttached you a image capture here.

1. So first I puto the Will Myers breadcrumb for categories and tags code,

2. Then I put the code for LOAD MORE in summary block-grid,

3. Suddenly they just appear in my top of each blog, just like I want it.

Can you help me to stilize it and make it appears in normal pages?

www.rudagt.squarespace.com not has password.

And, how I can apply the load more button to a diferent summary block as LIST type

Thanks.

Hopefully this can resolve the breadcrumb problem for each blog.

tuanphan · October 23, 2022

On 10/21/2022 at 2:00 AM, mazmac said:

@tuanphanHello

I think I resolve it by accident, I have a breadcrumb in each post in my blog but looks pretty bad. I ttached you a image capture here.

1. So first I puto the Will Myers breadcrumb for categories and tags code,

2. Then I put the code for LOAD MORE in summary block-grid,

3. Suddenly they just appear in my top of each blog, just like I want it.

Can you help me to stilize it and make it appears in normal pages?

www.rudagt.squarespace.com not has password.

And, how I can apply the load more button to a diferent summary block as LIST type

Thanks.

Hopefully this can resolve the breadcrumb problem for each blog.

You want to remove 1 breadcrumb? Add to Design > Custom CSS

div#breadcrumbNewsArticle:First-child {
    display: none;
}

mazmac · October 23, 2022

5 minutes ago, tuanphan said:
You want to remove 1 breadcrumb? Add to Design > Custom CSS
div#breadcrumbNewsArticle:First-child {
    display: none;
}

thanks, for edit, the other breadcrumb, would I wrote, Second-child ?

Thanks

mazmac · October 23, 2022

7 minutes ago, tuanphan said:
You want to remove 1 breadcrumb? Add to Design > Custom CSS
div#breadcrumbNewsArticle:First-child {
    display: none;
}

Btw...

What would be the right code to aff breadcrumb to all pages? I nos realize it is possible, but how would be written for future projects?

tuanphan · October 27, 2022

On 10/23/2022 at 9:08 AM, mazmac said:

Btw...

What would be the right code to aff breadcrumb to all pages? I nos realize it is possible, but how would be written for future projects?

Yes. Not possible. WIth standard page, you can use Text Block to add it manually

mazmac · November 10, 2022

Thanks for the answer

tuanphan · June 26, 2023

On 6/25/2023 at 5:11 PM, studiofounded said:

Hi @houghtoncreative, I have added this code but can't seem to get it working on my site (www.studiofounded.com/journal). Do you know where I'm wrong?

#1. Add this line above code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

#2. The url doesn't exist

Breadcrumb at the start of every blog post.

Recommended Posts

Guest

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

houghtoncreative

sinan

colin.irwin

Posted Images

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources