Menu Items do not contain children to generate sub menus

[andrewmkrug]

I have tried doing it with the parent being set in the menu items and by directly creating a children in the YAML file.

I have debugged it as well and the Jekyll:: Menus::Drops::Item doesn't contain anything in either case.

What is the proper way to generate sub menus that are only external links?

[envygeeks]

How are you doing it now? Please provide examples of your current usage.

[andrewmkrug]

menus.yaml

---
header:
- identifier:
  url: http://2017.seleniumconf.us
  weight: 2
  parent: confs
  title: Austin 2017
- identifier: confs
  url: "/"
  weight: 2
  title: Past Conferences

and i have tried

---
header:
- identifier: confs
  url: "/"
  weight: 2
  title: Past Conferences
  children:
  - identifier:
    url: http://2017.seleniumconf.us
    weight: 2
    parent: confs
    title: Austin 2017

neither way allows me to loop thru the item.children

[andrewmkrug]

@envygeeks bump

[envygeeks]

hey, sorry about forgetting about this. I'll try to replicate this in the morning and get back to you!

[sethcarlton]

I am running into an issue here as well. Let's say I have an About menu item in the header and I want a submenu item called Team. According to the jekyll-menus documentation I would accomplish that like so:

# in about.md
menus:
  header:
    name: About
    identifier: about
    weight: 0

# in team.md
menus: about

If I do it this way, children are included with the menu items in site.menus.header

However, when adding internal menu items via Forestry, the resulting format is as follows:

# in about.md
menu:
  header:
    name: About
    identifier: about
    weight: 0

# in team.md
menu:
  header:
    name: Team
    identifier: team
    weight: 0
    parent: about

The children items are no longer included with the item in site.menus.header

[christopherjbaker]

I am also having this same issue. The menus created in forestry do not respect the hierarchy that is shown in the forestry UI.

[josephrlee]

I'm also having the same issue with the Menus plugin as well. The children do not get generated inside their own nested list.

Here's my liquid snippet for my menus:

<nav id="expanded-menu" v-bind:class="{ expanded: expanded }">
  <div v-html class="level is-mobile">
    {% for item in site.menus.header %}
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="{{ item.url }}" class="menu-item-{{ forloop.index }}">{{ item.title }}</a>
          </h3>
          {% if item.children %}
            <ul class="sub-menu">
              {% for item in item.children %}
                <li class="menu-item-{{ forloop.index }}">
                  <a href="{{ item.url }}" title="Go to {{ item.title }}">{{ item.title }}</a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</nav>

Here's the generated frontmatter from the menu plugin to one of the child pages:

  header:
    weight: 3
    parent: why-sua

And here's the html output generated by the menu snippet:

<nav id="expanded-menu" v-bind:class="{ expanded: expanded }">
  <div v-html class="level is-mobile">
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/admissions/our-principal/" class="menu-item-1">Principal's Message</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/why-sua/" class="menu-item-2">Why SUA</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/get-involved/volunteer/" class="menu-item-3">Volunteer</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/why-sua/about-sua/" class="menu-item-4">About Us</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/get-involved/ways-to-give/" class="menu-item-5">Ways to Give</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/admissions/how-to-apply/" class="menu-item-6">How To Apply</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/admissions/" class="menu-item-7">Admissions</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/why-sua/mission/" class="menu-item-8">Mission + Values</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/why-sua/impact/" class="menu-item-9">Local Impact</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/get-involved/partnerships/" class="menu-item-10">Partnerships</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/admissions/faqs/" class="menu-item-11">Admissions FAQs</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/get-involved/" class="menu-item-12">Get Involved</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="https://google.com" class="menu-item-13">External Child Link Test</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/why-sua/staff/" class="menu-item-14">Our Staff</a>
          </h3>
          
        </div>
      </div>
    
      <div class="level-item">
        <div>
          <h3 class="title">
            <a href="/students/" class="menu-item-15">Students</a>
          </h3>
          
        </div>
      </div>
    
  </div>
</nav>

Shouldn't the liquid code generate the children in it's own sub menu instead of adding them all as top level links like it is now? Is there something wrong with the liquid code I'm using to generate the child menus?

Any help would be much appreciated, thanks!

[zalavariandris]

I have the same problem with nested menus. Have you found a solution?

[oscarvdl]

Same issue here. A solution for this would be really appreciated.

[envygeeks]

I’ll take a look at this, this week(end)

[oscarvdl]

Any update on this?

As workaround I've now solved it like this:

<ul class="sf-menu dd-menu pull-right" role="menu">
  {% for link in site.menus.navigation %}
    {% if link.parent == nil %}
      <li><a href="{{ link.url | absolute_url }}"{% if link.target %} target="_blank" {% endif %}>{{ link.title }}</a>
        {% assign nav_level_2 = site.menus.navigation | where: 'parent', link.identifier %}
        {% if nav_level_2.size > 0 %}
          <ul>
              {% for child in nav_level_2 %}
              <li><a href="{{ child.url | absolute_url }}"{% if child.target %} target="_blank" {% endif %}>{{ child.title }}</a></li>
              {% endfor %}
            </ul>
          {% endif %}
      </li>
    {% endif %}
  {% endfor %}
</ul>

[alexandrediasdasilva]

Same here. This bug kind of defeats the purpose of having a Menus feature in Forestry and makes it irrelevant for complex site hierarchies :(

[ybressler]

Same here. (Using github static pages)