Ghost is a great platform for writing.

As we discussed this in our last post, it's incredibly fast and has tons of optimized SEO features. But it doesn't have all the features. That's why I'm sharing with you how I added breadcrumbs to my Ghost page.
⚠️One note: Ghost doesn't have breadcrumbs support outside the box because breadcrumbs are something to do with the frontend, so it's up to the actual theme you're using to generate, display and style the breadcrumbs.

First of all: What are breadcrumbs🍞?

Do you remember the fairy tale Hansel and Gretel? The one in which the two siblings form a trail back to their home using breadcrumbs? Just like in the tale, breadcrumbs in web/apps offer users a way to trace back to their original starting path.

A breadcrumb (or breadcrumb trail) is a sort of secondary navigation scheme that reveals the user’s location in a web/app.

Why are breadcrumbs useful?

The advantage of using breadcrumbs from a user experience standpoint, could be summarized in it's convenience for the user, as they get a secondary way of surfing a multi-level web easily, and the reduction of actions to return higher-level pages.

As a SEO booster, they work great with the creation of internal links on page, and a way for the indexing bots to hierarchize your page (googlebot for example). If done correctly, and Google is in a good mood, your urls in a search result should look like:

domain > category > post title

How to implement Breadcrumbs to Ghost

Let's get the proper beef out with how's the way to add breadcrumbs to our Ghost page (don't get offended vegans).

It's quite a simple and easy task to perform. Because Ghost uses Handlebars.js for the frontend, we'll be using a template based html where we can access many data helpers related to our Ghost page (like post tags, author meta, current url...) and use it with our breadcrumbs snippet.
The recommended place to display your breadcrumbs is between the main header and the site content, so you'll have to look for a spot to add it. If you inspect my page, you'll see the html in this order:


</header>
<!-- .site-header -->
<nav class="breadcrumb"></nav>
<div id="content" class="site-content"></div>

The nav element with the class equal to breadcrumb, is the breadcrumb's menu. It's between the site header and the site content. Every theme is different, but in my case I added the snippet in my header template (header.hbs) as it follows:


{{^is "home"}}
	<nav class="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{@blog.url}}">Home</a></li>
		{{#is "page"}}
			<li class="breadcrumb-item">{{post.title}}</li>
		{{/is}}
		{{#is "author"}}
			<li class="breadcrumb-item"><a href="{{@blog.url}}/about/">about</a></li>
			<li class="breadcrumb-item">{{author.name}}</li>
		{{/is}}
		{{#is "tag"}}
			<li class="breadcrumb-item">{{tag.name}}</li>
		{{/is}}
		{{#is "post"}}{{#post}}{{#primary_tag}}
			<li class="breadcrumb-item"><a href="{{url absolute="yes"}}">{{name}}</a></li>
			{{/primary_tag}}
			<li class="breadcrumb-item">{{title}}</li>
		{{/post}}{{/is}}
	</ol>
	</nav>
{{/is}}

The code is quite simple. You can get some basic notion on how my breadcrumb structure looks like and works on the top of this post (or any other page). But if you need some code explanation, here it goes:

The {{^is "home"}} expression checks if the current page isn't the home page, because we want to show the breadcrumbs in all pages except the root one (home).
The {{#is "page"}} expression and other variants checks if the current page is a regular page, author page, tag page or post, and inside each block it just applies it's different values.

And you're done!

Easy, right?
The only thing remaining is adding a little styling so it matches your theme and looks like it always was there! This would be a basic styling for it:


ol .breadcrumb-item {
    display: inline-block;
}

ol .breadcrumb-item::first-letter {
    text-transform: uppercase;
}

A little great CSS tip, using the CSS3 pseudo selectors, you can add your custom separator/navigation icon. For example, if you'd like to add a '>' after each breadcrumb element (expect the last one) add this to your css code:


ol .breadcrumb-item:not(:last-child)::after {
    content: " >";
}


This should be more than enough. If you have any more questions or you want to leave some feedback on this topic, write a comment down below!👇🏻👇🏻
So, I hope you found this post interesting and useful😁. If that's the case, you know, press CTRL+D or CMD+D (save bookmark📘), and check Not an Engineer every now and then.

Cheers👋🏻💻🍺