The right way to add breadcrumbs to a theme?

Themes
1

Hey folks,

Would anyone know what’s the latest tried and tested way to add breadcrumbs to posts?

Cheers,

Ev

2

I was experimenting with a solution recently, and this is what I currently have for the markup.

<ol>
  <li><a href='{{ @site.url }}'>Home</a></li>
  {{#foreach tags limit='1'}}
    <li>
      <a href='{{ url }}'>{{ name }}</a>
    </li>
  {{/foreach}}
  <li>
    <a href='{{ url }}'>{{ title }}</a>
  </li>
</ol>

This code should be in the post.hbs file and it displays the Home link, followed by the first primary tag, and then the post title.

3

Do you think there’s a way to style these like a neat breadcrumb? e.g. in one line, without the numbers, and with something lie >> separating the categories?

4

Yep. You’ll just need some CSS. I’d add classes to Ahmad’s ol above to make it easier to target, then set it to display: inline-block, list-style-type: none

5

Thank you - used ChatGPT to write the CSS I needed, and it now looks good. Thank you both.

1 Like
6

I appreciate the code you’ve shared, and it seems like it will work effectively. However, in terms of SEO, I’d recommend not linking the last item in the list to the current page.

{{!-- Breadcrumbs begining  --}}
<ol class="gh-breadcrumbs" aria-label="You are here:">
<li>
    <a href="{{ @site.url }}" aria-label="Home">Home</a>
</li>
{{#foreach tags limit='1'}}
    <li>
    <a href="{{ url }}">{{ name }}</a>
    </li>
{{/foreach}}
<li>
    <span class="gh-breadcrumbs-active">{{ title }}</span>
</li>
</ol>
{{!-- Breadcrumbs end  --}}

I have written a quick example on our blog post with additional CSS provided.