Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hugo recursive partial to output navigation
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
<div id="nav">
{{ partial "recursive-nav.html" (dict "context" $dot "data" .Site.Menus.main) }}
</div>
...
<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>
...
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment