DEV Community

Farai Gandiya
Farai Gandiya

Posted on • Originally published at on

Breadcrumbs In Hugo

Breadcrumbs In Hugo was first published on Farai'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.

Links to home, the old ones and v8 redesign with a right arrow between them

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

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

Enter fullscreen mode Exit fullscreen mode

Then in breadcrumbs.html, include this:

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

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, it’s a Patreon Exclusive. Thanks to nfriedli for figuring this out!!

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

You can also subscribe to my newsletter.

Have feedback? Send an email to gandiyafarai+feedback at gmail dot com

Top comments (1)

integr8or profile image
Mark Stouffer

I spent way too much time trying to concatinate a string in Hugo yesterday to build the path before I found this recursive fix, which works perfectly. Thanks.