Creating a menu for all Nested Sections within a Section

Spent a bit of time on this. After reading quite a few topics, checking out the demo at and trying out several things.

This is by far the simplest way to create a Nested Sections menu without the regular pages permalinks.

{{ range .Sections }}
<a href="{{ .Permalink }}">{{ .Title | upper }}</a>

If you have an even better way of doing this please share.

The above menu renders only on the Main Section list and not on the Nested Sections list pages.

Now here is how to make a Nested Sections Menu appear everywhere within a Section.

{{ range (.Site.GetPage "section" .Section).Sections  }}
<li><a href="{{ .Permalink }}">{{ .Title | upper }}</a></li>

Thanks to @budparr for this


The above stopped working in Hugo 0.45 after the revision of the .GetPage API.

But with the help of @kaushalmodi in Panic Error with .GetPage in Hugo 0.45 - #2 by kaushalmodi here is the revised code snippet to have this functionality in Hugo 0.45.

{{ with .Site.GetPage (printf "/%s" .Section) }} 
{{ $sections := .Sections }}
{{ range where $sections }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}

I had to search for this one and the thought didn’t occur to me to look up the word “Section” when I want to display the title of a folder until I started to try and build my own theme.

Below is the index.html file. It displays the available sections or folders accessible from the home page.

Here is a list.html template file. It lists the section/folder titles in a section.


  • To display content on your home level file, you need to include {{ .Content }} in your index.html file.
  • To display the content on your sub level files, you need to includ {{ .Content }} in your list.hml files.
  • By design: the above ONLY displays the section titles. It does NOT display nested sections.
1 Like