This site is being remade and I won't be updating this for a while. Expect a lot of broken links, design and functionality. If all goes well, things should be stable by the end of 2022. Thank you for understanding.

HomePostsSnippets

Making Breadcrumbs in Hugo

Published

No need to over think it.

To get to the point, 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:

Breadcrumbs saying Home → The Old Ones → v8 Website Redesign

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.