Collapsible menu

support
1

I’m new here, using the Learn template which is great. The menu expands each top-level heading and all the pages below it - I hoped to have a collapsible tree. Am I missing something obvious, like using subdirectories, heading levels, or some bit of TOML? I’ve not found it by scanning the docs, but I’m not sure where to look for this feature. I’m not likely to start writing CSS/HTML at this stage. image

2

Hello. Your question is a bit too broad. Hugo is agnostic about collapsible tree menus and front end navigation in general.

With the above said you have 3 options:

A. If the chapter links are fixed then you could use Hugo’s menu configuration to generate the menu links you need: https://gohugo.io/content-management/menus/#readout

OR

B. You could have a look at the where function and its examples to filter pages, to create the list you need: https://gohugo.io/functions/where/#mainsections

OR

C. Also another option would be to ask directly at the Learn theme repository about customizing the theme’s navigation to create the collapsible tree menu: https://github.com/matcornic/hugo-theme-learn/issues

Also for future reference please have a look at the Requesting Help forum guidelines.

1 Like
3

Thank you very much for that most constructive reply.

4

Way late to the party on this, but I saw this post while trying to do the same thing. This github issue has the solution that your looking for, 1 Line CSS change to theme.css. I implemented the change and can confirm that it works.

5

Many thanks for that. I maybe should go to that thread to respond? Not sure of the etiquette here! Anyway I tried the mod to theme.css but the corresponding line differs slightly thus:

#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(–MENU-SECTIONS-ACTIVE-BG-color);
}

and not as in that thread:
#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {

simply substituting with the following line has no effect

#sidebar ul.topics li.parent > ul {

I am out of my depth here so should probably abandon it - it’s just aesthetics, really. Thanks for the heads up.

6

Anything between the brackets would stay the same, you would just replace the single line, so for example mine looked like this

#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
display: block;
}

and I changed it to this:

#sidebar ul.topics li.parent > ul {
display: block;
}

Once changed, don’t forget to clear your browser history just to be safe, as the old CSS can be cached in your browser.

So your existing entry of

#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(–MENU-SECTIONS-ACTIVE-BG-color);
}

should be changed to

#sidebar ul.topics li.parent > ul
background: var(–MENU-SECTIONS-ACTIVE-BG-color);
}