Those sub-menus drive me mad

support
1

First: Thank you so much for a fantastic static site generator, which - among other things - seems like an obvious choice for +1000 docs sites.

Next: It feels like, I’m almost there, but I’m still stuck getting a sub-menu up and running based on the config.yml below.

To be more specific its’s all about making the two elements with identifier laws and paragraphs a sub-menu of the jura-menu.

params:
  menu:
    main:
      - identifier: frontpage
        name: frontpage
        label: Forsiden
        pre: <i class='fa fa-list'></i>
        url: /hugo/
        weight: -120
      - identifier: yearmonth
        name: yearmonth
        label: År og måned
        pre: <i class='fa fa-list'></i>
        url: /hugo/categories/
        weight: -110
      - identifier: jura
        name: jura
        label: Jura
        pre: <i class='fa fa-list'></i>
        weight: -100
        url: /
      - parent: jura
        identifier: laws
        name: laws
        label: Love
        pre: <i class='fa fa-list-ol'></i>
        weight: -100
        url: /hugo/laws/
      - parent: jura
        identifier: paragraphs
        name: paragraphs
        label: Paragraffer
        pre: <i class='fa fa-tag'></i>
        weight: -100
        url: /hugo/tags/
      - identifier: decisions
        name: decisions
        label: Afgørelser
        pre: <i class='fa fa-answer-circle'></i>
        weight: 120
        url: /hugo/decisions/
      - identifier: about
        name: about
        label: Om
        pre: <i class='fa fa-question-circle'></i>
        weight: 130
        url: /hugo/about/

The prescribed parent-element is used. But how is it possible to iterate those menu levels in the right way and show them on web?

I use theme Icarus, that provides an awesome, navigation-rich and wiki-like 3-column design.

It likely comes down to header.html-template.

According to my test line 56-60 are the codelines responsible for rendering the menu on big screen (not mobile):

          {{ range .Site.Params.menu.main }}
          {{ if not .before }}
          <td><a class="main-nav-link" href="{{ .url  | absURL }}">{{ .label }}</a></td>
          {{ end }}
          {{ end }}

First line .Site.Params.menu.main is changed from .Site.Params.menu - and .url from .link - in order to match my config.yml.
It renders the menu, but it doensn’t create the two sub-menu elements as such. In contrary they are rendered as main-menu elements at the right of what was supposed to be their parent.

I have attempted to integrate ideas from the following sources - but without success:

  1. .HasChildren

  2. Site.assembleMenus may well be the way to go, but how?

  3. The code example in Rendering menus didn’t bring any sub-menus in my case.

  4. Even put menu: main into my yaml front-matter, but this just caused the following error:

ERROR: 2016/10/05 17:00:26 site.go:1211: Two or more menu items have the same name/identifier in Menu "main": "".

It looks like I’m not alone.

Have a feeling, the code below - with this source - might be pretty close.

        {{ $currentNode := . }}
{{ range .Site.Params.menu.main }}
  {{ if .HasChildren }}
    <li class="dropdown{{if $currentNode.HasMenuCurrent "main" . }} active{{end}}">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Pre }} {{ .Name }} <span class="caret"></span></a>
      <ul class="dropdown-menu">
      <!--
        Only 1 level of dropdown permitted - create links for children.
      -->
      {{ range .Children }}
        <li{{if $currentNode.IsMenuCurrent "main" . }} class="active"{{end}}><a href="{{ .url | absURL }}">{{ .Pre }} {{ .Name }}</a></li>
      {{ end }}
      </ul>
  {{ else }}
    <!--
      No children so just add a link.
    -->
    <li{{if $currentNode.IsMenuCurrent "main" . }} class="active"{{end}}>
      <a href="{{ .url | absURL }}">{{ .Pre }} {{ .Name }}</a></li>
  {{ end }}
{{ end }}

A little push or two would come in really handy.

2

I had a hard time understanding the menu system myself.

Quickly looking at your code, I think your main mistake is that you have put your menu config inside the Params.

Menu is (both in page front matter and in site config) a top level configuration element.

So it is:

menu:
  main:
      - Name: "about hugo"
        Pre: "<i class='fa fa-heart'></i>"
        Weight: -110
        Identifier: "about"
        URL: "/about/"
      - Name: "getting started"
        Pre: "<i class='fa fa-road'></i>"
        Weight: -100
        URL: "/getting-started/"

Note: No params.

And then you can iterate it like this:

https://github.com/bep/bepsays.com/blob/master/layouts/partials/menu.ace

The only example in the wild (apart from the unit tests in the code) I can think of with nested menus is the Hugo docs.

https://github.com/spf13/hugo/blob/master/docs/layouts/partials/menu.html

3

Thanks a lot. Both for depth and speed! I’l be digging into it in the near future.

6

Does anyone have a tutorial for a dropdown menu in bootstrap?

<div class="navbar-collapse collapse" id="navigation"> <ul class="nav navbar-nav navbar-right"> {{ range .Site.Params.menu }} <li class="dropdown"> <a href="{{ .url }}">{{ .name }}</a> <li class="dropdown-menu"> <a href="#">Dropdown</a> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> </ul> </li> </li> {{ end }} </ul> </div>