Issue with Hugo Menu Configuration

support
1

I’m trying to set up a menu using Hugo’s Menu Documentation, but I’m encountering a syntax and interface error. Here’s what I’ve tried:

Front Matter Example (as per Hugo documentation)

Based on the documentation, I tried using the following front matter for my “Terms of Business” page:

---
title: Terms of Business
menus:
  footer:
  - params:
       addendum: true
    parent: Consulting Services
---

Error Encountered

However, when I use this configuration, I get the following error:

unable to process menus for page "/company/terms-of-business": unable to cast []interface {}{map[string]interface {}{"params":map[string]interface {}{"adendum":true}, "parent":"Consulting Services"}} of type []interface {} to map[string]interface{}  logged 1 error(s)

Alternative Attempt (Without List Structure)

To troubleshoot, I tried removing the list structure and used the following:

---
title: Terms of Business
description: Terms of Business for the services provided by the company.
menus:
  footer:
    params:
      adendum: true
    parent: Consulting Services
---

Current Data Output

With this change, my data outputs as follows:

{{ Consulting Services Terms of Business 0 Terms of Business map[adendum:true]} footer Page(/company/terms-of-business) []}

Problem: I’m unable to access adendum within my menu template.

Template Code Snippet

Here’s the template code I’m using to render the menu items:

<!-- -->
{{- range .Site.Menus.footer }}
  <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-2">
    <h4 class="p-2 text-white">{{ .Name }}</h4>
    <hr />
    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
      {{- range .Children }}
        {{ . }}
        {{- with .Page }}
          <li class="nav-item">
            <a class="nav-link p-0" href="{{ .Permalink }}" title="{{ .Params.card.title }} - {{ .Params.card.content | plainify }}">
              <small><i class="fa-light fa-chevron-right pe-1"></i>{{- if .Params.shorttitle }}{{- .Params.shorttitle }}{{- else }}{{- .Title }}{{- end }}</small>
            </a>
          </li>
        {{- end }}
      {{- end }}
    </ul>
  </div>
{{- end }}
<!-- -->

Request for Assistance

How can I correctly configure the menu in the front matter so that I can access the adendum parameter within my template? Any insights into what I might be doing wrong or alternative approaches would be greatly appreciated.

2

mmh, looks like both of your front matter examples do not match any of the examples in the mentioned documentation. Your template has no reference to the addendum…

Guess you want to define a menu “footer” in your front matter with some parameters.

wouldn’t that be: (according to this example)

menus:
  footer:
    - params:
        addendum: true
      parent: Consulting Services
1 Like
3

Something is wrong here. I am relatively sure you have a main and a footer menu, but not a footer item in the main menu.

Your layout sample shows you using .Site.Menus.footer, so I assume the following might work.

---
title: Terms of Business
menus:
  footer:
    parent: Consulting Services
---

I don’t know what the adendum is about, so let’s leave that out of it until the submenu shows :wink:

If that doesn’t work, then what is the parents frontmatter looking like? It should have something along the lines of name: Consulting Services in it. I tend to use “slugs” for connections between menu items… as in “no space, no special character” names for the items, so that the parent frontmatter item can connect better.

4

Yes I see … that was a typo in the original… I get the error with:

---
title: Some title
menu
  footer:
    - params:
        addendum: true
      parent: Consulting Services
---

Ive updated my original postto remove the typeo…

5

Yes this works but is not in keeping with the sample on

---
menus:
  main:
  - params:
      class: center
    parent: Products
    pre: <i class="fa-solid fa-code"></i>
    weight: 20
title: Software
---

If I include the - I get the error… im going to go revalidate as now im confused!

6

Yup… validated… il try to be clearer here!

If I use the follwoing front matter:

---
title: Terms of Business
description: Terms of Business for the services provided by the company.
menus:
  footer:
    - params:
        class: center
      parent: Consulting Services
      pre: <i class="fa-solid fa-code"></i>
      weight: 20
---

The nI get the follwoing build error:

ERROR "C:\Users\MartinHinshelwoodNKD\source\repos\NKDAgility.com\site\content\company\terms-of-business\index.md:1:1": unable to process menus for page "/company/terms-of-business": unable to cast []interface {}{map[string]interface {}{"params":map[string]interface {}{"class":"center"}, "parent":"Consulting Services", "pre":"<i class=\"fa-solid fa-code\"></i>", "weight":20}} of type []interface {} to map[string]interface{}

when I try to do:

 {{- range .Site.Menus.footer }}
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-2">
              <h4 class="p-2 text-white">{{ .Name }}</h4>
              <hr />
              <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                {{- range .Children }}
                  {{ . }}

                  {{- with .Page }}

                    <li class="nav-item">
                      <a class="nav-link p-0" href="{{ .Permalink }}" title="{{ .Params.card.title }} - {{ .Params.card.content | plainify }}">
                        <small><i class="fa-light fa-chevron-right pe-1"></i>{{- if .Params.shorttitle }}{{- .Params.shorttitle }}{{- else }}{{- .Title }}{{- end }}</small>
                      </a>
                    </li>
                  {{- end }}
                {{- end }}
              </ul>
            </div>
          {{- end }}

If I remove the - it compiles, but no idea how to access the data.

7

The example in the documentation is incorrect.

When you define a menu entry in front matter, it must be a menu entry… singular. Your YAML defines the menu entry as an array element.

I’ve corrected the example:
https://gohugo.io/content-management/menus/#example-front-matter

2 Likes