How can I create multiple nested menus (more level) in Hugo?

Question

I'm creating a portfolio site for myself using the blowfish theme in Hugo. I want to create menus in it, but I'm getting a few errors. Instead of menus being listed nested, some of them look like a separate main menu. I searched many tutorials but couldn't find a solution.

This is the menu structure I want:

content/
├── programlama/
│  ├── python-egitimi/
│  │  ├── baslangic-seviyesi-temel-kavramlar/
│  │  │  └── \_index.md # Bu klasör için bir giriş sayfası
│  │  ├── temel-seviye-fonksiyonlar-ve-moduller/
│  │  │  └── \_index.md
│  │  ├── orta-seviye-ileri-konulara-giris/
│  │  │  └── \_index.md
│  │  ├── orta-seviye-oop-uygulamalari/
│  │  │  └── \_index.md
│  │  └── ileri-seviye-gelismis-konular/
│  │    └── \_index.md
│  ├── yazilim-araclari-ve-kullanisli-uygulamalar/
│  │  └── \_index.md
│  └── rehberler-ve-tutoriallar/
│    └── programlama-temelleri/
│      └── \_index.md
└── teknoloji-ve-haberler/
├── yapay-zeka-ve-makine-ogrenimi/
│  └── \_index.md
├── teknoloji-trendleri-ve-inovasyonlar/
│  └── \_index.md
└── guncel-yazilim-ve-teknoloji-haberleri/
└── \_index.md

current situation

As you can see in the photo, I want a nested menu that goes a-b-c, but what I get are two nested menus, a-b and b-c. Normally it should go through the side of the menu as I marked in purple. https://borisfx.com/ this site is also made with hugo and has a nested menu in support -> downloads -> sapphire style. I want something exactly like this.

Here is the toml file I created for the menu : https://github.com/emrecengdev/blogr/blob/main/config/_default/menus.en.toml

Answer 1

If you use your TOML as a based for structuring the nested menu, you could use a nested structure in TOML like this. Then you can iterate in the layout to create the menu based on the structure.

# Main menu
[main]

  # Define a submenu under the main menu
  [main.file]
  name = "File"

    # Define a submenu under the first submenu
    [main.file.new]
    name = "New"
    
    [main.file.open]
    name = "Open"

  [main.edit]
  name = "Edit"

    [main.edit.undo]
    name = "Undo"
    
    [main.edit.redo]
    name = "Redo"

      # Define items under the Zoom sub-submenu
      [main.edit.redo.task1]
      name = "Redo Task 1"

      [main.edit.redo.task2]
      name = "Redo Task 2"