# Automatic nested menu listing all sections, subsections and pages

**URL:** <https://discourse.gohugo.io/t/automatic-nested-menu-listing-all-sections-subsections-and-pages/17216>\
**Category:** tips & tricks\
**Created:** [February 25, 2019, 4:07pm UTC](https://discourse.gohugo.io/t/automatic-nested-menu-listing-all-sections-subsections-and-pages/17216 "2019-02-25T16:07:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nanella](https://avatars.discourse-cdn.com/v4/letter/n/898d66/32.png) [@nanella](https://discourse.gohugo.io/u/nanella)\
**Post date:** [February 25, 2019, 4:07pm UTC](https://discourse.gohugo.io/t/automatic-nested-menu-listing-all-sections-subsections-and-pages/17216/1 "2019-02-25T16:07:47Z")

</div>

I’ve googled quite some time to find out how to “automatically” create a menu listing all sections, n-level subsections and pages (see [Lazy blogger menu (weird suffix, nested)](https://discourse.gohugo.io/t/lazy-blogger-menu-weird-suffix-nested/17213)).

Sadly, the “lazy blogger menu” does not work for my case, since it lists only the top level sections and neither subsections nor pages.

So this is what I’ve come up with:  
`section-menu.html`

```
{{ $page := .currentPage}}
{{ range .menu }}
    <li>
        <a href="{{ .URL }}" class="{{if .IsAncestor $page}}active{{end}}">{{ .Name }}</a></li>
    <ul>
        {{ if .Sections }}
            {{- partial "section-menu.html" (dict "menu" .Sections "currentPage" $page)}}
        {{ end }}
        {{ $sectionPages := where .Pages "File.Dir" "in" .Dir }}
        {{ range $sectionPages }}
            <li>
                <a href="{{ .URL }}" class="{{if eq . $page}}active{{end}}">{{ .Name }}</a></li>
        {{ end }}
    </ul>
{{ end }}

```

Use it like this for listing all sections of the site:

```
{{- partial "section-menu.html" (dict "menu" .Site.Sections "currentPage" .Page) -}}

```

Or like this to list only the subsections and subpages of the current section:

```
{{- partial "section-menu.html" (dict "menu" .CurrentSection.Sections "currentPage" .Page) -}}
```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [February 25, 2019, 4:12pm UTC](https://discourse.gohugo.io/t/automatic-nested-menu-listing-all-sections-subsections-and-pages/17216/2 "2019-02-25T16:12:44Z")

</div>

Thanks for the tip. I think you will also like this one

> [@Menu with unlimited levels](https://discourse.gohugo.io/t/menu-with-unlimited-levels/15409):
>
> I discover new ways to exploit Go Template every day… I know a lot of people may already be doing it, but for some who aren’t here it is: {{/\* layouts/partials/main\_nav.html \*/}} \<div class="main-nav"\> {{ with .Site.Menus.main }} \<ul\> {{ range . }} {{ template "main\_nav\_item" . }} {{ end }} \</ul\> {{ end }} \</div\> {{ define "main\_nav\_item" }} \<li\> \<a href="{{ .URL }}"\>{{ .Name }}\</a\> {{ if .HasChildren }} \<ul\> {{ range .Children }} {{ template "main\_nav\_item" . }} {{ en…