Making Breadcrumbs in Hugo

Breadcrumbs are a type of navigation which shows pages in a particular order, like viewing history or, in my case, a page’s hierarchy.

To make them, there’s no need to over think it.

Write this where you want the breadcrumb:

<p class="breadcrumbs">
	{{ partial "breadcrumbs.html" . }}
</p>

Then in breadcrumbs.html, include this:

{{ with .Parent }}
    {{ partial "breadcrumbs.html" . }}
    {{ if .Parent }}→{{ end }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}

It will result in something like this:

The important thing is that you:

1. invoke the recursion by calling the breadcrumbs partial to the .Parent.
2. provide the separator (given you have one) conditional to whether the current .Parent has a parent and
3. link to the current crumb.

That’s it.

You can play with semantics based on what you need. Want to use nav > ul instead of p and make them list items so you can use Bootstrap’s breadcrumbs? Go ahead.

I spent far more time than I should have trying to solve this and this is what I ended up with. If you want the full story on how I got to this point, I might make it a premium post.