Implementing breadcrumb navigation in hugo?


#21

@croffler you can adapt something like this :

<script language="JavaScript">
<!--
   String.prototype.capitalizeFirstLetter = function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
   }

   //Bread crumb script - Kevin Lynn Brown
   //Duplicate directory names bug fix by JavaScriptKit.com
   //Visit JavaScript Kit (http://javascriptkit.com) for script

   var path = "<a href='{{ .Site.BaseURL}}'>Home</a>";
   var href = document.location.href;
   var s = href.split("/");
   for (var i=3;i<(s.length-2);i++) {
      path+=" &gt;  <a href=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i].capitalizeFirstLetter()+"</a> ";
   }
   i=s.length-1;
   path+="<a href=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</a>";
   path+="  &gt;   {{.Title}}";
   document.writeln(path);
//-->
</script>

#22

Thanks. Your code works, but serious sites use headers in the breadcrumb instead of name of folders. On sites with languages other than English chain of folders looks ugly.

Home > Lib > Iskusstvo-na-zapade > 9. Примитивы и декаденты

IMHO, For sites with academic publications, the most important elements of navigation is breadcrumbs and footnotes. Without the full support of these elements is difficult to make a friendly site.


#23

+1

Totally agree with Mikail


#24

I am happy to define parent for each page in the front matter. Wondering if there is code that I can use to develop breadcrumb based on Parent?


#25

Doesn’t have to be headers, but I see your point. The name of folders works fine if the folder names match the logic of the site. That’s more a question of content organisation. The other option is to put something like an index.md in each folder with frontmatter for the alternative section name that works for that site.

Actually, I have a pretty specific opinion on what breadcrumbs should be. For me they should be the user route through the site, not just the hierachy of that page (with titles / headers), as this is just another menu.


#26

Cool breadcrumbs from google.sites http://lunacharsky.newgod.su/lib/evropa-v-plaske-smerti/predislovie It is a pity that Hugo can not automatically generate this element.


#27

I don’t like those breadcrumbs personally. I realise it’s a common way. But it’s just mimicking the side menu. So better to highlight the side menu item for each page the user is on, remove breadcrumbs and save screen space.

In my opinion, breadcrumbs like this exist mainly because CMS systems made them easy. I rarely see a site that has useful breadcrumbs (usually only useful when site menus are not clear)

However, I see no reason why you can’t do what you want in Hugo now. But how breadcrumbs should be for each person may be too varied (in my opinion) to have Hugo choose one approach…


#28

If the idea is that the breadcrumb should be a unique trail that shows the user’s path, I don’t see how this would happen with a static site, but I do think think this would be possible with client-side code that holds those values and leverages local storage and push state.
In such a case, Hugo would be a separate concern because it’s focus is content and markup.

That said, the non-dynamic breadcrumb (ie, a reflection of the URL, more or less) has some utility for sites with multiple layers of navigation, especially since most of your users enter via external search and come at your site sideways and it can provide an immediate indicator of their location. Something like this gets hard with Hugo because of the ability to create different permalinks in your configuration, which precludes the idea that a parent directory in your source is the same parent path in the URL. My guess is that setting this up as a separate data file (or even as params in your config) would work best here.


#29

Sorry, I should have clarified I wasn’t lookng for ways to do this, just an opinion why header / menu based static breadcrumbs are not always thhe best option

Sure. In my experience such a need for breadcrumbs is more often either covering site navigation issues or mimicking them


#30

As an update to my solution further up this chain:

I’m not sure if a newer version of hugo changed how .Permalink works, but this is a bit simpler now. You no longer have to pull the baseurl out of the permalink.

{{ $.Scratch.Add "path" .Site.BaseURL }}
<ol class="breadcrumbs">
  <li><a href="/" class="material-icons">home</a></li>
  {{ range $index, $element := split .Permalink "/" }}
    {{ $.Scratch.Add "path" $element }}
      {{ if ne $element "" }}
      <li><a href='{{ $.Scratch.Get "path" }}'>{{ replace . "-" " " }}</a></li>
      {{ $.Scratch.Add "path" "/" }}
      {{ end }}
  {{ end }}
</ol>

As a user I don’t necessarily expect a dynamic set of breadcrumbs. I generally view breadcrumbs as a hierarchical way of navigating between pages. To each his/her own!


#31

So there’s “history breadcrumbs” and “position breadcrumbs” each has a benefit, and each has a drawback. The solution to position breadcrumbs is in this thread already. However the “history breadcrumbs” aren’t. I happend to stumble upon this old article that uses javascript and cookies to solve it.

It certainly can be improved by popping multiple entries off the stack when the user clicks one of the breadcrumbs, but it’s a starting place.

http://www.whitford.id.au/webmonkey/code/breadcrumbs/history_crumbs/javascript.php


#32

I’m an advocate of what are called here ‘history breadcrumbs’ (nice term that). Nice link to add to the thread. For me with this, with ‘postion’ breadcrumbs as a menu, creates a very user friendly and relevant form of navigation


#33

Sure this is a simple issue to this topic and the working solution from @rhewitt. I am new to hugo and go. Now I am working on a multilingual site and I would appreciate to know how this looks like with the languagecode included. Also I am wondering if there is no way to get the titles of the pages/taxonomies/nodes with the path known. Thanks in advance


#34

There is a problem with this. Imagine you have /content/section/category/article.md

The breadcrumb will be generated like: home / section / category / article/

You can click ‘home’. You can click ‘section’. They will take you to those list pages etc. You can also click ‘category’ but that doesn’t exist, so you get an error. You don’t get a 404 but httpd says forbidden b/c no empty directories will be displayed in my config.

Meaning, if you have subdirectories in your content/web-dev/hugo/ or content/web-dev/php/, hugo and php are not taxanomies or sections or categories with pages. Hugo doesn’t generate anything for that.

How would you counter this?

If you go to https://stoned.io/authors/yash-akasha/Thoughts-On-Standing-Rock-Dakota-Pipeline-Conflict/ and look at the breadcrumbs, yo’ull see it like

Authors > Yash Akasha > article name here.

Clicking Authors is fine. You get a list of articles from all authors. If I wanted to get only Yash, I go to authors/yash-akasha/ and that doesn’t exist b/c Hugo never generated anything for this.

I’ve been through the docs many times. I’m unsure what I’m missing. How would you feature multiple authors in said organization?

 <section>
 <div class="bread-container shadow">
 {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
 {{ $.Scratch.Add "path" .Site.BaseURL }}
 <ol class="breadcrumbs">
 <li>Navigation: </li>
   <li><a href="/">home</a></li>
   {{ range $index, $element := split $url "/" }}
     {{ $.Scratch.Add "path" $element }}
       {{ if ne $element "" }}
       <li>&rarr; <a href='{{ $.Scratch.Get "path" }}'>{{ . }}</a></li>
       {{ $.Scratch.Add "path" "/" }}
       {{ end }}
   {{ end }}
 </ol>
 </div>
 </section>

EDIT: https://gohugo.io/templates/views/ I bet I need to create a custom content display for authors? How would that create a list of articles by E ACH Author though?

I’m looking to have site.com/authors/authornamehere/all their articles here

EDIT2: That doesn’t sem to work. creating /themes/stoned.io/layouts/authors/li.html|single.html only affect how content/authors archetype/content type is displayed.

I still can’t figure out how to make hugo generate a page for the sub directories of content types.

I also have site.com/web-development/hugo/ and site.com/web-development/php etc. etc. Same thing with that.

How can I diplay that using hugo?

EDIT3 : I think I figured it out.

config.toml

[taxonomies]
author = "authors"

content/authors/yash-akasha/Thoughts-On-Standing-Rock-Dakota-Pipeline-Conflict.md

+++
authors=“yash-akasha”
+++

And now stoned.io/authors/yash-akasha/ (per the breadcrumbs from the content sub folder organization) shows the list of articles by Yash Akasha.

I’ll further test this w/ more authors. But it seems like it was as simple as adding another taxonomy. Nice.

This is a great Static Site Gen. You guys are awesome! :slightly_smiling: <3

EDIT 4: It seems that if you only specify the custom taxanomy, it will disable the default tags/category taxanomies.

So you have to specify the defautl ones, plus the custom ones you want

[taxonomies]
author="authors"
tag = "tags"
category = "categories"

EDIT 5: Seems this this would be manually done for each sub-dir?

I have site.com/web-dev/hugo and /web-dev/foo and /web-dev/bar

would I need to custom add taxanomies for each?

There has got to be a better more abstracted method? Anyone care to rub some neurons together with me? :slightly_smiling:


Docs Updated With Nested Sections
#35

Is there a way to style the link of the “active” page?

Perhaps with isMenuCurrent?


#37

Option that does not include the name of the current page in the breadcrumbs. Also this code allows to make custom headers for the elements of the chain.

{{ $baseurl := .Site.BaseURL }}
{{ $fullurl := print ( .RelPermalink | replaceRE "[^/]+/$" "") }}
<ol class="breadcrumbs">
  <li><a href="/" class="crumb">&#8962;</a></li>
  {{ range $index, $element := split $fullurl "/" }}
    {{ $.Scratch.Add "path" $element }}
      {{ if ne $element "" }}
      <li><a href='{{ $baseurl }}{{ $.Scratch.Get "path" }}'>{{ if isset $.Site.Data.titles . }} {{ index $.Site.Data.titles . }} {{ else }} {{ . }} {{ end }}</a></li>
      {{ $.Scratch.Add "path" "/" }}
      {{ end }}
  {{ end }}
</ol>

Custom headers should be written to the file \data\titles.yaml. They should look like this:

lib: "Библиотека"
book: "Книга"
book1: "Книга 1"

If you have the folders structure lib/book/article/, it will look like: Библиотека > Книга.


#38

hi,

I was just looking for a breadcrumb solution and came up with this solution.
Maybe this is a possibilty for others as well?

<ol class="breadcrumb">
  {{ template "breadcrumb" dict "currentPage" .Page "id" .UniqueID }}
</ol>

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

#39

I just to test the reply style.


#40

This works absolutely perfectly! Thanks!


#41

Thank you @maltesa, this works like a dream!

It would be great if this could be added to the Hugo docs. It’s such a common navigational element that it would help a lot of people. I think it would belong well alongside Menu Templates, Pagination and so on.