Multilevel menus

support
1

Hi there

I checked this discussion but I don’t get the multi level menu to work.

My content folders are like this:

Products
 Low Cost Products
      100$ product
      200$ product

In my menu I want to have the 3 levels. First 2 levels are no problem - the 3rd level doesn’t work.

My config.toml:
[menu]
[[menu.main]]
name = “Products”
identifier = “products”
url = “/products/”
weight = 10

On the _index file of Low Cost Products I have
[menu]
[menu.main]
name = “Low Cost Products”
identifier = “low-cost-products”
parent = “products”

On the index.md of the lowest level I have
[menu]
[menu.main]
name = “100$ product”
parent = “low-cost-products”
weight = 20

The template:

{ if .Site.Menus.main }}
<nav id="nav" class="c-primary-nav promote-layer">
	<ul class="c-primary-nav__list">

        {{ $currentPage := . }}
	    {{ range sort .Site.Menus.main }}
        {{ if .HasChildren }}
			{{ if .Name}}        		
				<li class="c-primary-nav__item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} nav--is-active {{ end }}">
					<span class="flexnav">
						<a class="c-primary-nav__link" href="{{ .URL | absLangURL }}">{{ .Name | upper }}</a>
						<button class="nav-toggle-secmenu icon-down-open" aria-hidden="true" aria-pressed="false" type="button"></button>
					</span>
			
            
	               <ul class="c-secondary-nav__list">
    	            {{ range sort .Children }}
        	        	<li class="c-secondary-nav__item">
            	    		<ul class="c-secondary-nav-bundle">
                				<li class="c-secondary-nav__bundleitem"><a href="{{ .URL | absLangURL }}" class="c-secondary-nav__link">{{ .Name }}</a></li>
                				{{ if .HasChildren }}
                					{{ range sort .Children }}
                						<li class="c-secondary-nav__bundleitem"><a href="{{ .URL | absLangURL }}" class="c-secondary-nav__link">{{ .Name }}</a></li>
                					{{ end }}
                				{{ end }}

                			</ul>
                		</li>
                	{{ end }}
            		</ul>
            	</li>
            {{ end }}

The first 2 levels are working fine - however checking the 2nd level children doesn’t seem to work. Not sure if I have a problem with the way the template is constructen with the nested children check or if it is a problem of definition in the frontmatter.

Hope someone can have a look

2

Hi there,

It would be easier to help you if you had your site code somewhere we can easily clone or otherwise replicate. Please read Requesting Help for more details about how to ask for help.

3

Hi - thanks and sorry (didn’t use github) I cloned the site- you can find the code here: https://github.com/dceuppens/hugo-testing
Menu is in layout/partials/menu.html ) I tested the menu within the gaming-pc section only / subsection budget-builds

4

I’m not sure I see what the problem is. I can see three levels of menus:

- Gaming PC         #1
  - Budget builds   #2
    - $300          #3
    - $400          #3
5

I have the impression that hugo serve is not always taking all the changes… I quit the process & and restarted and the menu appeared. But it is now indeed working as it should. Really appreciate you took the time to look into this - too bad I lost half a day for a problem that wasn’t one :frowning:
I now use hugo server --noHTTPCache --disableFastRender to prevent caching & to rebuild the full site - hope this solves the issue

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.