Nested menus in the horizontal navigation bar

[pauladambrookes]

Although the theme has drop-down nested menus for languages and versions, there seems no way to create custom drop-down menus. Which is an issue if your documentation site is very large.

I have managed to create them by modifying navbar.html and adding the menu entries to config.toml (using the parent field), but shouldn't this be built into the theme? It would be great if you could just define a sub-category in the frontmatter and it appears in the horizontal menu as a nested menu item.

[LisaFC]

I'll take a look!

[Iwen86]

Would love to have that feature as well. Any news on this?

@pauladambrookes would you share with us, how you modified navbar.html/config.toml?

[bbros-dev]

We too have struggled to get his working.

The following references suggest it should be possible:
https://discourse.gohugo.io/t/how-to-create-multilevel-dropdown-menu-in-hugo/18373/8

However, we have had no success.

Would be great if an example could be added.

[infilos]

Any progress?

[LisaFC]

I haven't had a chance to look at it myself yet, sorry.

Do think about what your use case would be, and whether it will actually make it easier for users to navigate around your site - the Kubernetes Docsy site is very large and doesn't have drop downs except for where it gives you an entirely different version of the site, as provided in the template. It's also not obvious to me how you would show which option is currently selected in a top menu drop down (which is fine for language and version selectors as you can either version banner the entire site or you can see what language it's in), which means the user doesn't have an obvious visual cue like in the left nav for which bit of the site they're actually in/where to navigate back up out of it.

If anyone has good examples, please add them!

[huehnerlady]

@pauladambrookes would be interested in your modification as well, could you please post your adaption here?

[kiransk9]

@LisaFC I am new to hugo and I am trying to adopt Docsy. But, I may require this functionality .Do you have any update on this request. Thank you.

[bbros-dev]

Do think about what your use case would be... Kubernetes Docsy....doesn't have drop downs except for where it gives you an entirely different version of the site, as provided in the template

This is exactly the use case.

[LisaFC]

You can do links to entirely different versions of the site in the top nav with the existing template - the version drop-down is built in and you can call that menu whatever you like: https://www.docsy.dev/docs/adding-content/versioning/#adding-a-version-drop-down-menu

Will that work for you @bbros-dev?

[huehnerlady]

I am also missing this functionality for grouping different items in a drop-down menu. as you have that funtionality for versions should it not be possible to implement this for custom items?

[hcientist]

I made this tiny change to try to add a single level of nested menus, but now I need to learn hugo modules so I can build and test.. anyone have any pointers on how I can get past this issue?

❯❯❯ hugo
Start building sites … 
hugo v0.91.0+extended darwin/arm64 BuildDate=unknown
ERROR 2022/08/22 01:57:54 render of "page" failed: execute of template failed: template: _default/single.html:16:7: executing "_default/single.html" at <partialCached "scripts.html" .>: error calling partialCached: "/var/folders/w8/xfw7gq950m3000pgxvdwd8n40000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hcientist/[email protected]/layouts/partials/scripts.html:64:117": execute of template failed: template: partials/scripts.html:64:117: executing "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/08/22 01:57:54 render of "page" failed: execute of template failed: template: _default/single.html:16:7: executing "_default/single.html" at <partialCached "scripts.html" .>: error calling partialCached: "/var/folders/w8/xfw7gq950m3000pgxvdwd8n40000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hcientist/[email protected]/layouts/partials/scripts.html:64:117": execute of template failed: template: partials/scripts.html:64:117: executing "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/08/22 01:57:54 render of "page" failed: execute of template failed: template: _default/search.html:16:7: executing "_default/search.html" at <partialCached "scripts.html" .>: error calling partialCached: "/var/folders/w8/xfw7gq950m3000pgxvdwd8n40000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hcientist/[email protected]/layouts/partials/scripts.html:64:117": execute of template failed: template: partials/scripts.html:64:117: executing "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/08/22 01:57:54 render of "page" failed: execute of template failed: template: _default/single.html:16:7: executing "_default/single.html" at <partialCached "scripts.html" .>: error calling partialCached: "/var/folders/w8/xfw7gq950m3000pgxvdwd8n40000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hcientist/[email protected]/layouts/partials/scripts.html:64:117": execute of template failed: template: partials/scripts.html:64:117: executing "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:16:7: executing "_default/single.html" at <partialCached "scripts.html" .>: error calling partialCached: "/var/folders/w8/xfw7gq950m3000pgxvdwd8n40000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hcientist/[email protected]/layouts/partials/scripts.html:64:117": execute of template failed: template: partials/scripts.html:64:117: executing "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
Total in 1485 ms

I found https://discourse.gohugo.io/t/resources-concat-with-js-slice-interface-not-supported-in-concat/26558/4 and so I removed staticDir from my site's config.toml...

[jonTrent]

@hcientist I ran into the same issue with Hugo Extended 0.102.3, and narrowed the issue to a missing resource. That is, preceding the "resource.Concat" function, the "resources.GetRemote" and "resources.Get" are fetching (in my case) 8 files to concatenate. Eg, one of the Get's in my case is...

{{ $jsAnchor := resources.Get "js/anchor.js" -}}

To determine which of the 8 was failing, I injected 8 debug statements along the following lines...

{{ warnf "%v %v" $jsAnchor.Name $jsAnchor.Content }}

...which prints to the terminal the Name of the file and its Contents (which could be quite lengthy).

In any event, this allowed me to narrow down which of the 8 files was not being fetched...

[kartikagarwal799]

Im facing same issue.

ERROR 2022/10/19 09:04:14 render of "page" failed: "/usr/local/bin/quickstart/themes/docsy/layouts/_default/baseof.html:16:7": execute of template f
ailed: template: _default/single.html:16:7: executing "_default/single.html" at <partialCached "scripts.html" .>: error calling partialCached: "/usr
/local/bin/quickstart/themes/docsy/layouts/partials/scripts.html:62:107": execute of template failed: template: partials/scripts.html:62:107: execut
ing "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/10/19 09:04:14 render of "section" failed: "/usr/local/bin/quickstart/themes/docsy/layouts/_default/baseof.html:16:7": execute of templat
e failed: template: _default/list.html:16:7: executing "_default/list.html" at <partialCached "scripts.html" .>: error calling partialCached: "/usr/
local/bin/quickstart/themes/docsy/layouts/partials/scripts.html:62:107": execute of template failed: template: partials/scripts.html:62:107: executi
ng "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/10/19 09:04:14 render of "taxonomy" failed: "/usr/local/bin/quickstart/themes/docsy/layouts/_default/baseof.html:16:7": execute of templa
te failed: template: _default/terms.html:16:7: executing "_default/terms.html" at <partialCached "scripts.html" .>: error calling partialCached: "/u
sr/local/bin/quickstart/themes/docsy/layouts/partials/scripts.html:62:107": execute of template failed: template: partials/scripts.html:62:107: exec
uting "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/10/19 09:04:14 render of "taxonomy" failed: "/usr/local/bin/quickstart/themes/docsy/layouts/_default/baseof.html:16:7": execute of templa
te failed: template: _default/terms.html:16:7: executing "_default/terms.html" at <partialCached "scripts.html" .>: error calling partialCached: "/u
sr/local/bin/quickstart/themes/docsy/layouts/partials/scripts.html:62:107": execute of template failed: template: partials/scripts.html:62:107: exec
uting "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
ERROR 2022/10/19 09:04:14 TOCSS: failed to transform "scss/main.scss" (text/x-scss). Check your Hugo installation; you need the extended version to
build SCSS/SASS.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Error: Error building site: failed to render pages: render of "home" failed: "/usr/local/bin/quickstart/themes/docsy/layouts/_default/baseof.html:16
:7": execute of template failed: template: home.html:16:7: executing "home.html" at <partialCached "scripts.html" .>: error calling partialCached: "
/usr/local/bin/quickstart/themes/docsy/layouts/partials/scripts.html:62:107": execute of template failed: template: partials/scripts.html:62:107: ex
ecuting "partials/scripts.html" at <resources.Concat>: error calling Concat: slice []interface {} not supported in concat
Built in 56 ms

[hurrellit]

This site is using Hugo/Docsy and appears to have managed it: https://www.cloudwego.io/ - see the "Documentation" drop down on the navbar. It seems they are also doing something with the navbar.html partials: https://github.com/cloudwego/cloudwego.github.io/blob/main/layouts/partials/navbar.html

I would love this feature too.

[BethProedrou]

I would also like to request this issue. I need a dropdown menu for the different versions and a different one with links to outside pages. With the current setup, the suggestion does not really work.