Nested Menu

Using Themes
1

I am new to Hugo. Just started.

Installed PaperPod theme: PaperMod | Hugo Themes

I would like to create a few simple nested drop-down menus under services and after spending several hours I still can’t make it work.

Here is config.yml

menu:
 main:
  - identifier: about
    name: "About"
    url: /about/
    weight: 1

  - identifier: services
    name: "Services"
    url: /services/
    weight: 2

  - identifier: psychotherapy
    name: "Psychotherapy"
    url: /services/psychotherapy/
    parent: "services"
    weight: 10

Hugo content folder has services.md file and a folder “services” inside of which there is psychotherapy.md file

Hovering over Services menu on the front-matter (site preview) does not produce the desired effect.

From what I’ve read, I also need to add a menu.html file to layouts/partials folder. I did and added this code:

<nav class="sidebar-nav">
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
    <a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    {{ end }}
</nav>

Does not work.

2

You will need to include .HasChildren in your menu. I cloned the theme, but it seems super complex for my understanding, so the theme author is the best bet to help you, though s/he doesn’t have plans to add nested menu to the theme.