Breadcrumb navigation for highly nested content

1

Let’s say my content folder is organized like that:

Section 1

  • Subtopic 1
    – Subsubtopic 1
    – Subsubtopic 2

and I am on the page “Subsubtopic 2” then I want the breadcrumb to look like this

Home > Section 1 > Subtopic 1 > Subsubtopic 2

I tried the template from the docs but this only gives me:

Home > Section 1 > Subsubtopic 2

(Subtopic 1 is missing)

Is there a quick fix for this?

2

I guess it’s doable, but aren’t subtopic1 and 2 siblings in the tree? To me it would look odd to present them as parent/child…

3

Sorry for the bad layout in my first post. I think this is better:

  • Section 1
    • Subsection 1
      • Subsubsection 1
      • Subsubsection 2

Home > Section 1 > Subsection 1 > Subsubsection 2

(Subsection 1 is the parent of Subsubsection 1 and Subsubsection 2.)

Here are the breadcrumbs
On page “Section 1” it is Home > Section 1
On page “Subsection 1” it is Home > Section 1 > Subsection 1
On page “Subsubsection 1” it is Home > Section 1 > Subsection 1 > Subsubsection 1
On page “Subsubsection 2” it is Home > Section 1 > Subsection 1 > Subsubsection 2

4

And they look … fine to me, which I assume must mean that I still miss something.

5

That’s the way they SHOULD look.

I found something in the “Learn” Theme.

The breadcrumb is defined in the file layouts/partial/header.html (line 63-80):

            <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                <span id="sidebar-toggle-span">
                    <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                      <i class="fas fa-bars"></i>
                    </a>
                </span>
              {{ if $toc }}
              <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
              {{ end }}
              <span class="links">
             {{$showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb))}}
             {{if $showBreadcrumb}}
                {{ template "breadcrumb" dict "page" . "value" .Title }}
             {{ else }}
               {{ .Title }}
             {{ end }}
              </span>
            </div>

And line 103-111:

    {{define "breadcrumb"}}
      {{$parent := .page.Parent }}
      {{ if $parent }}
        {{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.RelPermalink $parent.Title .value) }}
        {{ template "breadcrumb" dict "page" $parent "value" $value }}
      {{else}}
        {{.value|safeHTML}}
      {{end}}
    {{end}}
6

The easiest way in my opinion.

a partial breadcrumb.html

{{ with .Parent }}
    {{ partial "breadcrumb.html" . }}
    <a href="{{ .Permalink }}">{{ if .IsHome }}Home{{ else }}{{ .Title }}{{ end }} </a> ><br> 
{{ end }}

The breadcrumb call in your templates (without the page you are on):

{{ partial "breadcrumb" . }}

The breadcrumb call in your templates (with the page you are on):

{{ partial "breadcrumb" . }} <a href="{{ .Permalink }}">{{ .Title }}</a>
1 Like
7

@nfriedli: I tried your solution but I get the an error. Are you sure this works?

Actually I’m surprised that you define

{{ partial "breadcrumb.html" . }}

in the file partials/breadcrumb.html. Does the partial call itself? Never seen this before.

8

I’ve just found my error.

My file tree looked like this

/content/topic1/topic1.md
/content/topic1/subtopic1/subtopic1.md

instead of

/content/topic1/_index.md
/content/topic1/subtopic1/_index.md

In the docs it says: The important part to understand is, that to make the section tree fully navigational, at least the lower-most section needs a content file. (e.g. _index.md ).

Now the breadcrumb navigation from the docs works like charm.

1 Like
9

It is a computer science concept called recursion. Really powerful. Have a look here:

1 Like
10

You can use it with regular pages in directories, but you need a _index.md in every directory. You can see a website structure here: https://github.com/nfriedli/theologique.ch/tree/master/content

NB: The breadcrumb is not activated on my production website, but it works!

For this website, I use recursion in my sitemap, too.

1 Like
11

Thanks for the explanation!

…but the two GitHub links don’t work (404 error).

12

Sorry. My repo was a private one. It is OK now.

1 Like
13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.