Breadcrumb navigation

[rodrigoalcarazdelaosa]

I've been trying to implement breadcrumbs for my site for quite a long time. I've explored several automatic ways of doing it, but with no success as the structure of my site is not simple (problem are parent sections). I'm now trying to implement it in a more manual way, defining a new field in the front matter of my posts/projects etc. This breadcrumbs field would be an array with the different parents that particular file has (these differ from the actual url of the file, that's why it's not easy to do it with automatic solutions):

breadcrumbs: ["parent1","parent2","parent3"]

Now, the question is: how can I access the values of that array if I'd like to show those breadcrumbs above the title of my pages for example? I guess I need to override the page_header.html partial and put some code above line 57 <h1>{{ $title }}</h1>, but how can I iterate over the values of the array? Another question would be how to convert those text fields to links to the specific sections of my site, but that's for another day.

Thank you very much in advance,
Rodri

[chrede88]

This is would be a cool addition to many websites.
Take a look at bootstraps breadcrumb implementation: https://getbootstrap.com/docs/4.0/components/breadcrumb/

Iterating over an array can be done with range.

{{ $array: ["item10","item11","item12"]
{{ range $index, $item := $array }}
  {{ printf "item num: %d - item: %s" $index, $item }}
{{ end }}

Output:

item num: 0 - item: item10
item num: 1 - item: item11
item num: 2 - item: item12

[rodrigoalcarazdelaosa]

Awesome @chrede88. I'll give it a try ASAP.

[rodrigoalcarazdelaosa]

Thanks to you, I was able to add breadcrumbs to my site @chrede88 👏🏼👏🏼👏🏼. In a very manual way though, but I'm quite happy with the end result (live version here):

[chrede88]

Founds this on the Hugo discourse: https://discourse.gohugo.io/t/snippet-partial-for-creating-breadcrumbs-uses-bootstrap-4/15426

Take a look at the recursive example, think you should be able to use it more or less out of the box.

[chrede88]

Played around with it myself! The syntax in the example I linked to, is old and won't work. But I figured out how to port it to recent Hugo syntax.

You'll need two partials, one "main" partial (breadcrumb.html) that's called from page_header.html and a helper (breadcrumbHelp.html) that's called recursively through the stack of "parents".

First the main partial:

{{ if not .IsHome }}
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      {{ partial "breadcrumbHelp" . }}
      <li class="breadcrumb-item active" aria-current="page">
        {{.Title | emojify }}
      </li>
    </ol>
  </nav>
{{ end }}

Next the helper:

{{ with .Parent }}
  {{ partial "breadcrumbHelp" . }}
  <li class="breadcrumb-item">
    <a href="{{ .Permalink }}">
      {{ if .IsHome }}{{ i18n "Home" | emojify }}{{ else }}{{.Title | emojify }}{{ end }}
    </a>
  </li>
{{ end }}

Then place a partial call (on line 57 and 83) to the main breadcrumb partial {{ partial "breadcrumb" $page }}, in page_header.html.

This should automatically produced a breadcrumb trail with valid links on every page and list-page.

[chrede88]

I have added the code to my test page. I stole your css ;)
https://chrede88.github.io/starter-academic/post/testpost/

[rodrigoalcarazdelaosa]

Played around with it myself! The syntax in the example I linked to, is old and won't work. But I figured out how to port it to recent Hugo syntax.

You'll need two partials, one "main" partial (breadcrumb.html) that's called from page_header.html and a helper (breadcrumbHelp.html) that's called recursively through the stack of "parents".

First the main partial:

{{ if not .IsHome }}
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      {{ partial "breadcrumbHelp" . }}
      <li class="breadcrumb-item active" aria-current="page">
        {{.Title | emojify }}
      </li>
    </ol>
  </nav>
{{ end }}

Next the helper:

{{ with .Parent }}
  {{ partial "breadcrumbHelp" . }}
  <li class="breadcrumb-item">
    <a href="{{ .Permalink }}">
      {{ if .IsHome }}{{ i18n "Home" | emojify }}{{ else }}{{.Title | emojify }}{{ end }}
    </a>
  </li>
{{ end }}

Then place a partial call (on line 57 and 83) to the main breadcrumb partial {{ partial "breadcrumb" $page }}, in page_header.html.

This should automatically produced a breadcrumb trail with valid links on every page and list-page.

Thanks for this! Only problem that I see (haven’t tested it yet) is that it’s using .Permalink to get the different parents of a page. For blog posts that works fine as the parent will be post which gets you to the corresponding index page. But in the case of my notes, which use the portfolio widget, the parents are not defined in the url (permalink) of the page, but need to be mapped, hence those conditionals in my code 🙄

[rodrigoalcarazdelaosa]

Played around with it myself! The syntax in the example I linked to, is old and won't work. But I figured out how to port it to recent Hugo syntax.
You'll need two partials, one "main" partial (breadcrumb.html) that's called from page_header.html and a helper (breadcrumbHelp.html) that's called recursively through the stack of "parents".
First the main partial:

{{ if not .IsHome }}
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      {{ partial "breadcrumbHelp" . }}
      <li class="breadcrumb-item active" aria-current="page">
        {{.Title | emojify }}
      </li>
    </ol>
  </nav>
{{ end }}

Next the helper:

{{ with .Parent }}
  {{ partial "breadcrumbHelp" . }}
  <li class="breadcrumb-item">
    <a href="{{ .Permalink }}">
      {{ if .IsHome }}{{ i18n "Home" | emojify }}{{ else }}{{.Title | emojify }}{{ end }}
    </a>
  </li>
{{ end }}

Then place a partial call (on line 57 and 83) to the main breadcrumb partial {{ partial "breadcrumb" $page }}, in page_header.html.
This should automatically produced a breadcrumb trail with valid links on every page and list-page.

Thanks for this! Only problem that I see (haven’t tested it yet) is that it’s using .Permalink to get the different parents of a page. For blog posts that works fine as the parent will be post which gets you to the corresponding index page. But in the case of my notes, which use the portfolio widget, the parents are not defined in the url (permalink) of the page, but need to be mapped, hence those conditionals in my code 🙄

To illustrate my point

If we consider the url of the example that I showed, it would be this:

https://rodrigoalcarazdelaosa.me/en/notes-15-16-year-olds/motion/

The parent of motion would be notes-15-16-year-olds, which takes you here (which doesn't even exist as I used custom localized urls):

https://rodrigoalcarazdelaosa.me/en/notes-15-16-year-olds/

whereas I want it to take me here (the corresponding section of the portfolio widget:

https://rodrigoalcarazdelaosa.me/en/notes/#15-16-year-olds

That's why I used that manual way