Menu nesting doesn't work, hugo v0.165.0 (ananke theme, but maybe others work?)

Using Themes
1

I’m looking at the nested-menu-related documentation here:

I use the code example as shown, in my hugo.toml:

baseURL = 'https://example.com/'
locale = 'en-us'
title = 'My Site'
theme = 'ananke'
[menus]
  [[menus.main]]
    name = 'Products'
    pageRef = '/products'
    weight = 10
  [[menus.main]]
    name = 'Hardware'
    pageRef = '/products/hardware'
    parent = 'Products'
    weight = 1
  [[menus.main]]
    name = 'Software'
    pageRef = '/products/software'
    parent = 'Products'
    weight = 2
  [[menus.main]]
    name = 'Services'
    pageRef = '/services'
    weight = 20
  [[menus.main]]
    name = 'Hugo'
    pre = '<i class="fa fa-heart"></i>'
    url = 'https://gohugo.io/'
    weight = 30
    [menus.main.params]
      rel = 'external'

But then the menu nesting doesn’t work! There’s no nesting; hovering reveals no drop-down menu. “Hardware” and “Software” disappear from the menu!

bad_menu2
bad_menu2519×205 2.21 KB

I can get the menuing to behave sanely, but only when I comment out the “parent =” lines in hugo.toml (and have a flat, rather than nested menu structure)

menu_flat
menu_flat692×265 3.41 KB

2

There is no automatism for converting a menu config to html.

Ananke only processes a flat menu: ananke/layouts/_partials/site-navigation.html at main · gohugo-ananke/ananke · GitHub

heres the example code for walking a nested menu as a nested list for a starter: Menu templates

but if you want a popup submenu you will need some more code to get that up.
you will find plenty of examples for javascript or css menus that you need to understand and adapt.

3

Are there any popular hugo themes to speak of, which have been kept up to date with the latest hugo v0.165.0, and do provide the menu nesting magic out-of-the-box, but don’t go so far as to require or use node.js?

4

You may have a look at here: https://themes.gohugo.io/

Browse them, maybe preselect a tag that matches your website style and check out their demo/example site.

5

Alas, I tried a bunch of themes, they all either didn’t work with Hugo 0.165.0, or they wanted to pull in dependencies I was wanting to avoid (bootstrap, Dart SCSS, node.js, npm, npx, etc)

#too old theme = 'hugo-universal-theme'
#wants Dart Sass theme = 'FixIt'
#garbage theme = 'port-hugo'
#crashing theme = 'paige'
#tailwind wants node.js theme = "hugo-product-launch"
#effectively identical to ananke theme = "hugo-theme-blunix"
#is only a landing page theme = 'Agnes'

The contributors of themes to Hugo were of course scratching their own itches, and I applaud them for giving back. But virtually none of them seem to really want to follow the original spirit of Hugo, in that it’s a static content generator, which has an original philosophy to avoid or eschew dynamic, complex things like Javascript (in order to minimize “attack surface” to hackers, be performant, have few dependencies, etc)