Nested TOML Configuration to Bootstrap Dropdown

With a config.toml file like this:

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

[[menu.main]]
    url = "/page2/"
    name = "Page 2"
    weight = 2

[[menu.main]]
    url = "/page3/"
    name = "Page 3"
    weight = 3

And a simple range like this:

<ul class="navbar-nav mr-auto">

  {{ range sort .Site.Menus.main }}
  <li class="nav-item">
    <a href="{{ .URL }}">{{ .Name }}</a>
  </li>
  {{ end }}
</ul>

I can create a decent navigation bar with Bootstrap (version 4, for what matters).

However I was thinking how I could create nested levels. Since TOML is kind of new to me I searched about and apparently nested levels looks like:

[menu.main.page2]
url = "/subpage1/"
name = "SubPage 1"
weight = 1

[menu.main.page2]
url = "/subpage2/"
name = "SubPage 2"
weight = 2

[menu.main.page2]
url = "/subpage3/"
name = "SubPage 3"
weight = 3

But how exactly I could convert this to a real Bootstrap Dropdown?

I don’t think converting this into an infinite level would result is something very maintainable, so 2 or 3 levels would be enough I suppose, but infinite would be awesome.

The very basic idea that occurs to me is to have an entry to indicating a relationship between parents and childrens, but that’s just speculation.

The theme where I could be possibly using this is so small and simple that I could hard code it as plain HTML, but this got my curiosity :slight_smile: