In my previous version of the auto-collapsing (nested) menu I chose to avoid Hugo’s subsections. However, due to an update of the breadcrumbs, I was motived to test the possibility to create a nested menu based on sections and subsections. I succeeded and the code became much cleaner/shorter and simpler, especially due to the ‘.Ancestors’ variable. The way to determine if a page is ‘active’ is done through the following code:| Hugo Codex
This is a true gem by Joe Mooring: Generating a trail of breadcrumbs became much simpler with Hugo v0.109.0 and later. Use the .Ancestors method on .Page. {{- range .Ancestors.Reverse }} {{ .Title }} {{- end }} {{ .Title }} UPDATED 2023-03-06: You can find this code now also in the breadcrumbs add-on.| Hugo Codex
I have been building Hugo websites for half a year now some, and I am a BIG fan. Sure the documentation is a bit weird or incomplete at times. Where do you find the variable ‘resources’ (all lowercase), for example? I don’t know. On the other hand, the Discourse channel is absolutely amazing. The time people are devoting to help everybody out is just mind blowing. In the past six months I have stuggled a lot and learned a lot.| Hugo Codex
Introduction Breadcrumb paths are a single line of links (often placed above the title) that show a page’s location in the site hierarchy. Every website should have breadcrumbs, as it benefits SEO as well as the users understanding of the sites structure. How it works This code looks at the Ancestors variable to create the breadcrumb path. This approach has a small footprint. Additionally, this code does not require the breadcrumbs to be explicitly defined in the front matter / YAML.| Hugo Codex