How to configure Hugo menu in Netlify CMS?

Netlify CMS
1

I have a Hugo menu setup like this in config.toml:

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1

And in my Netlify CMS config.yml, I have this:

collections:
  - label: "Config"
    name: "config"
    files:
      - label: "Config"
        name: "config"
        file: "config.toml"
        fields:
          - {label: "Title", name: title, widget: string}
          - label: "Menu"
            name: menu
            widget: object
            fields:
              - {label: "Identifier", name: identifier, widget: string}
              - {label: "Name", name: name, widget: string}
              - {label: "URL", name: url, widget: string}
              - {label: "Order", name: weight, widget: number}

However, it seems that Netlify CMS writes to [menu] instead of [[menu.main]]. How do I map the field to a nested array of tables?

2

Almost there! Try nesting the fields in another object called main.

3

Thanks for the quick response—that worked almost! Only thing is the fields are not parsed as expected…

Config updated to:

  - label: "Settings"
    name: "settings"
    files:
      - label: "Config"
        name: "config"
        file: "config.toml"
        fields:
          - {label: "Title", name: title, widget: string}
          - label: "Menu"
            name: menu
            widget: object
            fields:
              - label: "Main"
                name: main
                widget: object
                fields:
                  - {label: "Identifier", name: identifier, widget: string}
                  - {label: "Name", name: name, widget: string}
                  - {label: "URL", name: url, widget: string}
                  - {label: "Order", name: weight, widget: number}

Screenshot of fields in the UI:

CleanShot 2021-12-18 at 12.00.46
CleanShot 2021-12-18 at 12.00.46835Ă—669 53.1 KB

4

I wasn’t looking closely enough. Converted to yaml, your data looks like this:

menu:
  main:
    - identifier: home
      name: Home
      url: /
      weight: 1

main is actually an array and you should therefore use a list widget, not an object. The list map values in the field inputs gave it away.

5

Success! Thank you @tomrutgers! :smiley:

Side note: Hugo orders menu items by the weight property but the list widget has drag and drop sorting which doesn’t affect the weight. It would be great if drag and drop could be disabled. Or if drag and drop could update weight.

6

You can open a feature request over at GitHub

1 Like