Multi-Level Menus

support
1

I am building a site and want to have three levels of menus instead of the two levels I can currently achieve using Hugo.

For example, on my navigation bar I wish to have:
- Introduction
– Topic 1
— Page 1
— Page 2
– Topic 2
— Page 3
- Contact
…

I currently have menus in two levels, the top specified by a config.json, and then each page assigned into this menu using a header like the below:

+++
title = "Bulk API"
weight = 1
[main]
  [menu.main]
    parent = "bulk"
    title = "Bulk API"
+++

I have looked at Multi-level menu using material design theme and also tried a large number of different permutations. I am including a snippet our current menu generating code here, which uses recursion on itself to render:

{{ range .menu.ByWeight }}
    {{ $is := $page.IsMenuCurrent "main" . }}
    {{ $has := $page.HasMenuCurrent "main" . }}
    {{ if .HasChildren }}
    <li>
        <a href="{{ .URL }}" class="mdl-components__link parent{{ if $is }} is-active {{ end }}">
            {{ .Name }}
        </a>
        {{ if .HasChildren }}
            {{ if or $is $has }}
                {{ partial "menu_recursive.html" (dict "menu" .Children "page" $page "site" $site "nested" true) }}
            {{ end }}
        {{ end }}
    </li>
    {{ else }}
    <li>
        <a href="{{ .URL }}" class="mdl-components__link parent{{ if $is }} is-active {{ end }}">
            {{ .Name }}
        </a>
    </li>
    {{ end }}
{{ end }}
2

I got this partially working using _index.md pages in the sub-folders of the tree, however there are a few issues:

  • The main issue is that these sub-pages in my menu all have $is set, e.g. in my above example when I click on Topic 1, then the following items have $is set which causes highlighting: Topic 1, Topic 2, Introduction. I think this is because the page “Topic 1” links to is really the same page as “Introduction” – it isn’t creating a listing page for just the things under the Topic 1 folder in my content tree structure.
  • I have to use parent="" in my front-matter pointing to the name of the “sub category” given in my _index.md, it would be nice to point to the name of the subfolder for that sub-category, or have a more programmatic (e.g., not english text) “id” element.
3

Just an update: This mostly works using https://github.com/dropseedlabs/sibbell-public/issues/21 (v0.22), but there are still some issues that I have – which are different enough from the original question here that I have opened Determining Current Menu Parent with Sections (not explicit menu).