Creating nesting menus on Hugo theme?

Question

I am trying to build a website with Hugo. I am having some trouble getting nested menus set up.

I am using the Tokiwa theme for this project. here is a link to my repo.

On the main page of the site I am trying to create menus that slide down to show subfolders, here is an example from the imperial-library site to show what I mean. You can click on “game books” and then a list opens up that shows all of the available topics for that option. Ex (All, Arena, …) If you click on one of the topics it takes you to a page with a list of all of the entries and a short description of each one. You can then click on the entry to view that post.

In my project my directory is structured

content -> writing (Writing has subfolders poem and stories)

So on the home page I would like for someone to be able to click on “writing” then it would slide down to reveal “poems” and “stories”. You could then click on either one of those to view a list page formatted like

description of poem 1 - link to poem 1

description of poem 2 - link to poem 2

description of poem 3 - link to poem 3

I would also like to add this feature to other topics than only writing.

My config.toml file has the following

 sectionPagesMenu = "main"

[menu]
  [[menu.main]]
    identifier = "writing"
    name = "writing"
    url = "/writing"
    weight = 1
     [[menu.main]]
    identifier = "post"
    name = "post"
    url = "/post"
    weight = 2
  [[menu.main]]
    identifier = "poems"
    name = "poems"
    url = "/category/poems"
    parent = "writing"
    weight = 1
  [[menu.main]]
    identifier = "stories"
    name = "stories"
    url = "/category/stories"
    parent = "writing"
    weight = 2

in my layouts/index.html

{{ define "menu-item" }}
  {{ $page := .page }}
  {{ with .entry }}
    {{ if .HasChildren }}
      <li class="{{ if $page.HasMenuCurrent "main" . }}active{{ end }}">
        <a href="{{ .URL }}">{{ .Name }}</a>
        <ul class="sub-menu">
          {{ range .Children }}
            {{ template "menu-item" (dict "entry" . "page" $page) }}
          {{ end }}
        </ul>
      </li>
    {{ else }}
      <li class="{{ if $page.IsMenuCurrent "main" . }}active{{ end }}">
        <a href="{{ .URL }}">{{ .Name }}</a>
      </li>
    {{ end }}
  {{ end }}
{{ end }}

<ul>
  {{ $page := . }}
  {{ range .Site.Menus.main }}
    {{ template "menu-item" (dict "entry" . "page" $page) }}
  {{ end }}
</ul>

I also tried following this example from the hugo docs

Currently my site displays with the theme and when I click on a link the url seems correct ex writing/poems/poem1. However, the folders are not displaying correctly.

I have posted this as well on the hugo forums and was unable to quite get my question answered. I browsed through many of the topics on "nesting menus" on the hugo forums and was still unable to exactly figure this out.

Thank you

Answer 1

I asked about this on the Tokiwa github.

The solution was to

Put custom.css and custom.js into static/lib/ folder, and add two lines in baseof.html:

<link rel="stylesheet" href='{{"lib/custom.css"|absURL}}' crossorigin="anonymous">
<script src='{{"lib/custom.js"|absURL}}' crossorigin="anonymous"></script>
Before </head> tag.