Home → Bikeshed → Components
breadcrumbs.html
Published: Updated:
Update 13 October 2023—I moved this post into the Bikeshed section since it describes a component I use on this site.
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="{{ .RelPermalink }}">{{ .Title }}</a>
{{ end }}
It will result in something like this:
The important thing is that you:
- invoke the recursion by calling the breadcrumbs partial to the
.Parent
. - provide the separator (given you have one) conditional to whether the current
.Parent
has a parent and - 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.