[SOLVED] Can't evaluate field dropdown in type *hugolib.MenuEntry

support
1

Hello everyone,
I’m quiet new to Hugo and im the past few days im having a Problem with the navbar that im desinging.
i wanted to make a navbar where one of the points has a dropdown with more navigationlinks. I had this problem alerady when tring to use a “enabledropdown” value for an if statment whether or not to use a dropdown with a specific navpoint. i solved this by simply comparing the name of the navpoint and the preset value.
So my link in named “Products” and right now im just comparing if the name is “Products” and if yes im showing a dropdown.
When imply using the “enableDropdown = true” and a {{ if .enableDropdown }} within a {{ range .Site.Menus }} function gave me this ERROR : can’t evaluate field enableDropdown in type *hugolib.MenuEntry.

Now im also tring to make the points of the dropdown adressable in the config.toml and i get the same ERROR.
config.toml:

[menu]

  [[menu.header]]
    weight = 2
    name = "Solutions"
    ur = "/solutions"
  [[menu.header]]
    weight = 3
    name = "Products"
    ur = "#"
  [[menu.header]]
    weight = 4
    name = "Refernces"
    ul = "/referenzen"
  [[menu.header]]
    weight = 5
    name = "Contact"
    ul = "/contact"
  [[menu.header]]
    weight = 5
    name = "Impressum"
    ul = "/impressum"
    [[menu.header.dropdown]]
      name = "Test1"
      ul = "#"
    [[menu.header.dropdown]]
      name = "Test2"
      ul = "#"

html:

{{ $product := "Products"}}
{{ range .Site.Menus.header }}
 {{ if eq .Name $product }}
  <div class="dropdown">
    <li class="navbtn"><a href="{{ .URL }}/">{{ .Name }}</a></li>
    <div class="dropdown-content">
     {{ range .dropdown }}
        <a href="#">{{ .name }}</a>
     {{ end }}
    </div>
    </div>
 {{ else }}
   <li class="navbtn"><a href="{{ .URL }}/">{{ .Name }}</a></li>
 {{ end }}

{{ end }}
ERROR:
Building sites … ERROR 2018/08/01 10:04:33 Error while rendering “page” in “”: template: page/single.html:8:5: executing “page/single.html” at <partial .Params.id .>: error calling partial: template: partials/solutions.html:2:3: executing “partials/solutions.html” at <partial "header_solu…>: error calling partial: template: partials/header_solution.html:31:33: executing “partials/header_solution.html” at <.dropdown>: can’t evaluate field dropdown in type *hugolib.MenuEntry
Total in 180 ms
Error: Error building site: logged 1 error(s)
Any tipps are welcome :slight_smile:

1 Like
2

That may be because dropdown is not a MenuEntry variable: Menu entry variables | Hugo

If you want to define nested menus you could instead define a menu entry’s parent:

    [[menu.header]]
      parent = "Products"
      name = "Test1"
      url = "#"
    [[menu.header]]
      parent = "Products"
      name = "Test2"
      url = "#"

and then access that by range-ing through the children::

    <div class="dropdown-content">
      {{ if .HasChildren }}
        {{ range .Children }}
          <a href="{{.URL}}">{{ .Name }}</a>
        {{ end }}
      {{ end }}
    </div>
1 Like
3

i feel so stupid now^^
Thank you very much :smiley:

4

I am also trying to accomplish a “dropdown” menu without any luck. Can you provide a link to your site and code?

I have followed the above directions, making changes to my config file and Navigation file, but the children nav items are not displaying.

Thanks

5

Hi,

I don’t think I have a public repo with menus configured. How have you set up your menu in your config.toml? And how are you generating the menu in your layout?

7

I cant upload the whole site right now, need to talk to my boss first. But here are the important parts:
https://github.com/BashCS/dropdown
I hope this helps :slight_smile:

8

You can take a look at my code here:
https://github.com/BashCS/dropdown
Hope that helps :slight_smile:

9

I have set up the main menu in config. Here is a link to our github.

10

Thanks so much for providing the code. I am working on it now. Will let you know how it goes.

11

I do have the menu configured in config.toml

Below is my site-navigation.html. I have tried to include your code from header.html that you shared. The “About” section on main nav is where I am hoping to place a submenu. I kept some of your code, hoping to get the menu to partially work.

I have spent many hours working on this and I am completely confused at this point. Apologies.

<nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="{{ .Site.BaseURL }}" class="f3 fw2 hover-white no-underline white-90 dib">
      {{ .Site.Title }}
    </a>
    <div class="flex-l items-center">
      {{ if .Site.Menus.main }}
        <ul class="pl0 mr3">
          {{ range .Site.Menus.main }}
            {{ if .HasChildren }}
              <div class="dropdown">
              <div class="col-md-6">
                <h1>About</h1>
                  {{ range where $.Pages "Section" "About" }}
                    <a href="{{.RelPermalink}}">{{.Params.title}}</a>
                  {{ end }}
              </div>
              <div class="col-md-6">
                <h1>Products</h1>
                  {{ range where $.Pages "Section" "produkte" }}
                    <a href="{{.RelPermalink}}">{{.Params.title}}</a>
                  {{ end }}
              </div>
            </div>
          </div>
        {{ else }}
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
              {{ .Name }}
            </a>
          </li>
          {{ end }}
        {{ end }}
        </ul>
      {{ end }}
      {{ partial "social-follow.html" . }}
    </div>
  </div>
</nav>
12

Hi @Allen616 ,

A few notes:

  1. Your menu config does not have children defined, so .HasChildren always returns false. Please refer to the docs here: https://gohugo.io/content-management/menus/#nesting or the second post above for examples of how to nest menus.

  2. I’m a little confused as to what you are trying to do in the {{if .HasChildren}} block. What you have here is that it will print out all the pages in the About and Product sections to any menu where .HasChildren is true.

  3. This is what I am assuming you wish to accomplish:

    1. range through all menus configured
      1. if the menu item is About or Product(?) and has children, put the children in a dropdown?
      2. else treat as regular menu

If my assumptions above are accurate, you have at least two options:

  1. Configure menu entry for each page under About (or whatever applicable) section either in its own page frontmatter or on the config.toml (see above links to docs for how to accomplish), then something like
<!-- code untested -->
{{ range .Site.Menus.main }}
  {{ if .HasChildren }}
  {{.Name}}<!--this is the parent-->
  <div class="dropdown">
    {{ range .Children }}<!-- these are the children menu items -->
     <a href="{{.URL}}">{{.Name}}</a>
    {{ end }}
  </div>
  {{ else }}
  {{ .Name }}<!-- No children menu -->
  {{ end }} 
{{ end }}
  1. If you don’t want to config the individual pages’ menu entries, and you know which sections specifically you want to display the children of, something like this probably works:
<!-- code untested -->
{{ range .Site.Menus.main }}
  {{ if eq .Identifier "about" }}<!-- you have to do this for each menu item that has children you want to display -->
    {{ range where $.Pages "Section" .Identifier }} 
   <!-- assuming .Identifier matches section, otherwise replace with "about" -->
      <a href="{{.RelPermalink}}">{{.Params.title}}</a>
    {{ end }}
  {{ else }}
    <a href="{{.URL}}">{{.Name}}</a>
  {{ end }}
{{ end }}

I hope that helps!