How to Add Breadcrumbs to Your Ghost Theme

Breadcrumbs are series of navigational links that connect together to show you exactly where you have navigated on a website and can be a useful tool for improving your site’s User Experience (UX) and Search Engine Optimization (SEO).

When we are talking about Ghost, breadcrumbs can be useful if you have an advanced routes setup, or if you want to add some structure to your site and help the users easier navigate through it. Next, we’ll explain how you can add breadcrumbs to your posts and style them.

Add the breadcrumbs template

In Ghost breadcrumbs can be added using tags, the most simple implementation would be using the primary_tag:

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="{{@site.url}}">Home</a></li>
  {{{#primary_tag}}
  <li class="breadcrumb-item"><a href="{{url}}">{{name}}</a></li>
  {{/primary_tag}}
  <li class="breadcrumb-item breadcrumb-current">{{title}}</li>
</ul>

Breadcrumbs are usually displayed towards the top of the page for easy access, so the code should be added in post.hbs before the other content and within {{#post}} and {{/post}} tags. In case you have some custom templates as well and you would like to include the breadcrumbs, then it might be a good idea to create a partial file with this code and simply include it in all the templates.

If you want to add even more levels, you can show all tags, or set a specific limit, like this:

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="{{@site.url}}">Home</a></li>
  {{#foreach tags limit="1"}}
  <li class="breadcrumb-item"><a href="{{url}}">{{name}}</a></li>
  {{/foreach}}
  <li class="breadcrumb-item breadcrumb-item-current">{{title}}</li>
</ul>

Style the breadcrumbs

Since we added custom code for the breadcrumbs, we also have to style it and this can be done by adding custom CSS. Ghost provides an easy way to do this called Code Injection, which is part of the Ghost Admin settings.

Add the following CSS between <style></style> tags:

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}

.breadcrumb li + li::before {
  content: '/';
  margin: 0 0.5em;
  opacity: 0.5;
}

.breadcrumb-item-current {
  font-weight: 500;
}

Another option is to add the CSS code into your Ghost theme's CSS files, for that you should check out the documentation of the theme you are using.

Conclusions

Breadcrumbs can serve as necessary complements to the primary navigation menu of your site. At the same time, adding breadcrumbs can make it easier for visitors to navigate throughout your site, can improve UX, and helps search engines in understanding your content and its overall structure.