Hugo recursive partial to output navigation

config.yaml

languages:
  en:
    menu:
      main:
        - identifier: menu_home
          name: "Home"
          url: "/home/"
          weight: 10
        - identifier: menu_about
          name: "About"
          url: "/about/"
          weight: 20
        - identifier: menu_about_team
          name: "Team"
          url: "/about/team/"
          weight: 10
          parent: menu_about
        - identifier: menu_about_careers
          name: "Careers"
          url: "/about/careers/"
          weight: 20
          parent: menu_about
        - identifier: menu_contact
          name: "Contact"
          url: "/contact/"
          weight: 30

nav.html

<div id="nav">
  {{ partial "recursive-nav.html" (dict "context" $dot "data" .Site.Menus.main) }}
</div>

output.html

...

<div id="nav">
  <ul>
    <li><a href="http://localhost:1313/home/">Home</a></li>
    <li>
      <a href="http://localhost:1313/about/">About</a>
      <ul>
        <li><a href="http://localhost:1313/about/team/">Team</a></li>
        <li><a href="http://localhost:1313/about/careers/">Careers</a></li>
      </ul>
    </li>
    <li><a href="http://localhost:1313/contact/">Contact</a></li>
  </ul>
</div>

...

recursive-nav.html

<!-- Partial -->
{{ $dot := . }}
{{ $ctx := .context }}
<ul>
    {{ range $index, $element := .data }}
        <li>
            <a href="{{ $dot.Site.BaseURL }}{{ $element.URL }}">{{ $element.Name }}</a>
            {{ if $element.Children }}
                {{ partial "recursive-nav.html" (dict "context" $ctx "data" $element.Children) }}
            {{ end }}
        </li>
    {{ end }}
</ul>