Custom Menu and active class

support
1

I’m struggling to understand how to give class ‘active’ with a custom menu.
I have a partial called _render_nav.html where i have my menu template

{{ $currentPage := . }}
{{ range .menu.navigation }}
  {{ if .HasChildren }}
    <li class='dropdown'>
      <a class='arrow'>{{ .Name }}</a>
      <ul class='submenu'>
        {{ range .Children }}
          <li class="{{ if $currentPage.HasMenuCurrent ".menu.navigation" . }}active{{ end }}">
            <a href='{{ .URL }}'>{{ .Name }}</a>
          </li>
        {{ end }}
      </ul>
    </li>
  {{ else }}
    <li>
      <a href='{{ .URL }}'>{{ .Name }}</a>
    </li>
  {{ end }}
{{ end }}

And then under > data > nav.yml i have my menus

menu:
  navigation:
    - Name: "Learn"
      URL: "/learn"
    - Name: "Contribute"
      URL: "/contribute"
    - Name: "Community"
      URL: "/community"
      HasChildren: true
      Children:
        - Name: "Chapters"
          URL: "/chapters"
        - Name: "Projects"
          URL: "/projects"
        - Name: "Our Stories"
          URL: "/stories"
    - Name: "About"
      URL: "/about"
      sub:
        - Name: "Our history"
          URL: "/history"
        - Name: "Projects"
          URL: "/projects"
        - Name: "Where"
          URL: "/where/"
        - Name: "What drive us"
          URL: "/drive"
        - Name: "Contact"
          URL: "/contact"
  social:
    - Name: "Twitter"
      icon: "twitter"
      URL: "https://twitter.com/OpenTechSchool"
    - Name: "Facebook"
      icon: "facebook"
      URL: "https://www.facebook.com/OpenTechSchool/"
    - Name: "Donate"
      icon: "heart"
      URL: "/foundation/donate"

Server watch complain that the key menu.navigation is illegal :confused:
Can someone help me to understand how the look up for menus works?
I have nothing defined in my config file

2

The way you try to use your menu with the {{ if $currentPage.HasMenuCurrent ".menu.navigation" . }} code is from what I understand meant for when your menu is specified in the configuration file. If you use a data file for your menu I don’t think you can use HasMenuCurrent.

It’s probably easier to set your menu in the configuration file, instead of the nav.yml data file.

See Hugo menus and using menus in Hugo template code for a bit more information about how menus work.