Hugo sub menu problems

support
1

I know that hugo main menu can be accessed via .HasChildren and .Children
I want to organize my html structure like this

<ul class="top-menu">
    <li class="item-1"></li>
    <li class="item-2"></li>
</ul>
<ul class="sub-menu" data-parent="item-1"></ul>
<ul class="sub-menu" data-parent="item-2"></ul>

Just split the sub-menu from top menu, and controlled by JS.
I am not sure how to maintain the relations.
Thanks.

2

You can make two loops. First loop is inside the top-menu list and renders only the first level items:

Second loop is right after </ul>. For each first level menu item, if it .HasChildren, it renders <ul class="sub-menu" ...>. Inside each list it loops over the corresponding .Children and renders list elements.

You can access list indices like this:

{{ range $i, $menuItem := site.Menus.main }}
  <li class="item-{{ $i }}">
    <a href="{{ $menuItem.URL }}" ... >
1 Like
3

Thanks, I got.