Breadcrumbs In Hugo was first published onFarai's Codelab.

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

Implementing this was frustrating, but I eventually figured it out. In short, you need to do something similar to this:

<!-- In whatever template --><p>    {{ partial "breadcrumbs.html" . }}</p>

Then inbreadcrumbs.html, include this:

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

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 usenav > ul instead ofp and make them list items so you can useBootstrap’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, it’s aPatreon Exclusive. Thanks tonfriedli for figuring this out!!

Thanks for reading! If you liked this post, considersupporting my work by:

• sharing my work,
• refering me for a job (or hire me for freelance work),
• sponsoring me onPatreon,
• buying Me A Coffee,
• buying Me A Ko-Fi,
• sending me a tip on Paypal,
• buy something on Amazon with my affiliate link (I’ll earn a commision on this as an Amazon affiliate),
• orbuy a domain on Namecheap with my affiliate link.

You can alsosubscribe to my newsletter.

Have feedback? Send an email togandiyafarai+feedback at gmail dot com