Implementing breadcrumb navigation in hugo?


@maltesa Yours is by far the simplest solution for Breadcrumb Navigation. Thank you!

I modified it a bit to exclude the homepage link as I needed to give it a different name than the title.

Here is the modified snippet.

<span class="breadcrumb">
<a href="/">Custom Homepage Title</a>
  {{ template "breadcrumb" dict "currentPage" .Page "id" .UniqueID }}

<!-- templates -->
{{ define "breadcrumb" }}
 {{ if .currentPage.Parent }}
 {{ if ne .currentPage.Parent .IsHome }}
    {{ template "breadcrumb" dict "currentPage" .currentPage.Parent }}
  {{ end }}
    {{ if eq .id .currentPage.UniqueID }}
      {{ .currentPage.Title }}
    {{ else }}
      <a href="{{ .currentPage.URL }}">{{ .currentPage.Title }}</a> >
    {{ end }}
{{ end }}
{{ end }}


Use Permalink or RelPermalink for … linking.


The original poster has defined the currentPage key with dict
{{ template "breadcrumb" dict "currentPage" .Page "id" .UniqueID }}

If one uses .Permalink as you suggest the parent pages will have the current page’s URL.

Just tried it out.


That was not what I said.


Right. Sorry. I misunderstood your comment.

Now I think I got it. You meant this:

<a href="{{ .currentPage.Permalink }}">{{ .currentPage.Title }}</a> >


<a href="{{ .currentPage.RelPermalink }}">{{ .currentPage.Title }}</a> >

Is that right?



In short, the URL is the raw URL definition of the page, and should probably unexported, but that would probably break more than it would help. But my point is that URL may in many cases differ from RelPermalink, which will be bad if you use it in a theme.


Links of this implementation way up the chain is all messed up for me.

URL like http://localhost:1313/videos/season-1/ outputs a list of three items with links as http://localhost:1313/, http://localhost:1313/videos/season-1//http://localhost:1313/videos and http://localhost:1313/videos/season-1//http://localhost:1313/videos/season-1 respectively.

Currently trying to make this code work with this one, that’s way more elegant and have working URLs but duplicates content.