Choose Menu From Front Matter?

support
1

I currently have 2 menus in my config.toml file and I would like to be able to choose which menu to use in the front matter. This may be super trivial, but I couldnt find an answer when searching for it.

Here’s what I have so far, which kinda works, but I get a weird artifact issue.

config.toml

[[menu.main]]
name = "Features"
pre = "<i class='fas fa-heart'></i>"
weight = -110
identifier = "about"
url = "/about/"

[[menu.main]]
    name = "Sections"
    pre = "<i class='fas fa-heart'></i>"
    weight = -110
    identifier = "child"
    url = "/style-guide/"
    parent = "about"

[[menu.main]]
name = "getting started"
pre = "<i class='fas fa-road'></i>"
weight = -100
url = "/style-guide/"

[[menu.test]]
name = "Pricing"
pre = "<i class='fas fa-heart'></i>"
weight = -110
identifier = "about"
url = "/about/"

[[menu.test]]
    name = "Sections"
    pre = "<i class='fas fa-heart'></i>"
    weight = -110
    identifier = "child"
    url = "/style-guide/"
    parent = "about"

[[menu.test]]
name = "getting started"
pre = "<i class='fas fa-road'></i>"
weight = -100
url = "/style-guide/"

_index.md file

EDIT

---
page_title: Docs
nav-menu: test 
---

Original - using menu parameter for menu switching was causing the error.

---
page_title: Docs
menu: test 
---

Nav.html

<ul class="navbar-nav">
   {{ $currentPage := . }}
   {{ $menu := index .Site.Menus .Params.nav-menu }}
   {{ range $menu }}
      {{ if .HasChildren }}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{.Name}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              {{ range .Children }}
              <a class="dropdown-item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
              {{end}}
            </div>
          </li>
          {{ else }}
          <li class="nav-item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}">
            <a class="nav-link" href="{{.URL}}">{{.Name}} {{ if $currentPage.HasMenuCurrent "main" . }}<span class="sr-only">(current)</span>{{ end }}</a>
          </li>
          {{ end }}
        {{ end }}
      </ul>

This method allows for menu switching from the front matter, however, I get a weird additional empty menu option as an artifact, which I’m guessing is because hugo is trying to make a menu option from the front matter’s menu declaration of menu=test and the use of the index function.

<li class="nav-item active">
     <a class="nav-link" href="/style-guide/"> <div class="ripple-container"></div></a>
</li>

Any suggestions how I can make this more clean?

EDIT: Got it to work the way I wanted it to - see below comment. Still open on ways to clean it up / better process. Also active still doesnt work the way it should.

2

I semi solved my problem.

I narrowed down the cause of the additional list item to the menu parameter in the front-matter. I changed menu to nav-menu which then stopped this from happening. I’m guessing since menu is a reserved paramater it was causing a conflict.

One aspect I am still working on is getting active as a supported class depending on the menu that’s being used. I’m trying to add $menu as a variable to {{if or ($currentPage.IsMenuCurrent ( print $menu ) .) ($currentPage.HasMenuCurrent ( print $menu ) .) }}active {{ end }} but this doesnt seem to be the correct useage. I’ve also tried printf but couldn’t get it to work properly either.

Any thoughts here?