title: Two Level Menus in Hugo
body: <p>I want to create a site with deep menus using Hugo. I want the ability to make child items parents to new lower-level items.
  I tried using this site's tutorial.
  <a href="https://codingnconcepts.com/hugo/nested-menu-hugo/" rel="nofollow noreferrer">https://codingnconcepts.com/hugo/nested-menu-hugo/</a></p>
  <p>I am able to create one-level submenus, but I want a logic system that I can continue to create subpages with automatically.</p>
  <pre><code>&lt;nav class=&quot;nav&quot;&gt;
      &lt;ul class=&quot;menu&quot;&gt;
          {{ range .Site.Menus.main }}
          &lt;li class=&quot;{{ if $currentPage.HasMenuCurrent &quot;main&quot; . }}active{{ end }}&quot;&gt;
              &lt;span&gt;{{ .Name }}&lt;/span&gt;
              {{ if .HasChildren }}
              &lt;span class=&quot;drop-icon&quot; for=&quot;{{ .Name }}&quot;&gt;▾&lt;/span&gt;
              &lt;ul class=&quot;sub-menu&quot;&gt;
                  {{ range .Children }}
                  &lt;li class=&quot;{{ if $currentPage.HasMenuCurrent &quot;main&quot; . }}active{{ end }}&quot;&gt;
                      &lt;span&gt;{{ .Name }}&lt;/span&gt;
                  &lt;/li&gt;
                  {{ end }}
              &lt;/ul&gt;
             {{ end }}
          &lt;/li&gt;
          {{ end }}
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>This sample above creates one submenu, but I can't figure out how to make two levels work.</p>