Multi-column dropdown menu

support
1

Hi all!
It seems surprising to me, but I cannot find any previous discussion on how to build a multi-column dropdown menu in Hugo. I’d like something like this See the “NDC” dropdown menu or this See the “Languages” dropdown menu. Is this something far too complicated to be obtained?

Many thanks
Alex

2

That menu is html + css.
In the code I see a mere sequence of li, a and ul elements… Hugo has nothing to do with that, it’s a matter of theme. The second’s site’s css seems minified so no very readable… You’ll have to build it yourself.

3

you need a structure akin to

<menu>
    <li><input type="checkbox" id="section-{{ md5 .Page }}" class="toggle" {{ if or $current $ancestor }}checked{{ end }} />
    <label class="section_class{{ if $current }} active{{ end }}" for="section-{{ md5 .Page }}">
      <a {{ if and .Page.Content (not $current) }}href="{{ .Page.Permalink }}"{{ end }} role="button" class="{{ if .Page.Content}} content {{end}}">
        {{- partial "docs/title-menu" .Page -}}
      </a></label><menu>submenu</menu></li>
{{{{... repeat ! }}}
</menu>

And a css like

menu {
   input + label + menu {display:none}
   input:checked + label + menu {display:block}
}

Then use the column property on menu or a grid layout, and I suppose fixed or absolute positioning

1 Like
4

Many thanks, Tom. I’ll follow your suggestion

5

Sorry if I’m too ignorant, but what am I supposed to put as values for the variables $current and $ancestor (both of which, I guess, are to be declared at the beginning of the partial)?

6

For that you need to see the file menu-filetree.html in the hugo-book theme. I suppose plenty of others theme menus would do, but mine comes from there, and since I don’t exactly remember what I changed or not - and to be honest I would not be able to make it from scratch I’d rather defer to the original.