Does Hero support submenu in nav-bar?

[Bp3289]

Hi,

I am currently using the hero theme for hugo. I've been trying to add a dropdown menu in the navbar. I've seen from other themes that they use a "submenu" and use the parent and children identifier in the config.toml. I've also seen some people suggest the reason submenu isn't working for them is because their theme doesn't support it. I can't find any documentation for the hero theme to tell if it supports submenu. I wanted to ask just in case it's not supported for hero theme.

Best,
William

[Bp3289]

Ended up building one, so it is possible! Closing out issue

[JugglerX]

Im glad you got it done. If your repo is public can you share the link, this is quite a common request.

[Bp3289]

Unfortunately the repo is private, however I can explain how I made it work.

First off, I had to edit my config.toml.

There is an "identifier" property you can throw in. Then for whatever you want inside the dropdown, you need to add the property called "parent", like so:

`[[menu.main]]
name = "Resources"
identifier = "resources"
weight = 3

[[menu.main]]
name = "Blog"
parent = "resources"
url = "/blog/"`

Then in the html there is an "HasChildren" and "{{range .Children}}" properties that will need to be added, like so:

<ul> {{ $currentPage := . }} {{ range .Site.Menus.main }} {{ if .HasChildren }} <div class="dropdown"> <button class="dropbtn">Resources <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> {{ range .Children }} <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"> <a href="{{ .URL }}">{{ .Name }}</a> </li> {{ end }} </div> </div>

That's how I was able to get it working. Cheers!

[firebone-be]

@Bp3289
I know this post is a bit old but I am also looking to add submenus.

I tried adjusting the layouts/partials/main-menu.html but I am messing up somewhere.

This is what I have:

<div id="main-menu" class="main-menu">
  <ul>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
      {{ if .HasChildren }}
        <div class="dropdown"> <button class="dropbtn">Resources <i class="fa fa-caret-down"></i> </button>
          <div class="dropdown-content"> {{ range .Children }} 
            <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"> 
              <a href="{{ .URL }}">{{ .Name }}</a> 
            </li>
      {{ end }}
        </div>
      </div>
    </ul>
  </div>

But getting unexpected eof error...