Third-level menu

Support
1

I have pages structure with grandchildpages (03.site->01.site->01.site) and I created dropdown-menu. I have a problem with loop in child pages with own children because foreach have returned only one page from page collection (last page in the array of children pages precisely) in dropdown submenu.
This is my code:

 {% for p in child.children %}
          <div class="dropdown-menu">
                 <a href="{{p.url}}">{{p.title  }}</a>
          </div>
 {% endfor %}

Can anybody help me to solve this problem?

2

@pawel I suppose this is not all code used for building the menu. Would you mind sharing a bit more of the entire recursing loop your are using?

3

@anon76427325 Yes I cut for loop from inside another for loop. Below it’s all.

{% for page in pages.children.visible %}
                    {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
                    {% if config.themes.pawel-theme.dropdown.enabled and page.children.visible.count > 0 %}
                        <li class="nav-item dropdown menus {{ current_page }}">
                            <a href="{{ page.url }}" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ page.menu }}</a>
                            <ul class="dropdown-menu flex-column">
                               {% for child in page.children.visible %}
                                    {% set current_child = (child.active or child.activeChild) ? 'active' : '' %}
                                    <li class="dropdown-submenu {{ current_page }}">
                                    <a href="{{ child.url }}" class="dropdown-item {{ current_child }}">{{ child.menu }}</a>

                                {% for p in child.children %}
                                <div class="dropdown-menu">
                                <a href="{{p.url}}">{{p.title  }}</a>
                                </div>
                                {% endfor %}

                                   </li>
                               {% endfor %}
                            </ul>
                        </li>
                    {% else %}
                        <li class="nav-item {{ current_page }}"><a class="nav-link" href="{{ page.url }}">{{ page.menu }}</a></li>



                        {% endif %}
                {% endfor %}
4

@pawel I have been staring at it for some time but could’t find an obvious issue why the 3th loop wouldn’t return any child pages.

A few questions come to mind looking at the code…

Questions with respect to looping:

  • Are you sure the 3th level really returns multiple pages?
  • Are all child pages numbered?
  • Do the pages perhaps have a frontmatter like ‘visible: false’?
  • Have you tried dumping the ‘p’ child using {{ dump(p) }} and watch the number of children it has? (Need to switch on the debugger in ‘system.yaml’ for that)
  • What does the generated HTML look like?
  • Could it be the js/css does not display 3th level?
  • As a side note: Wouldn’t a looping/recursing macro be a bit more elegant?

Questions with respect to HTML:

  • Where is the most outer <ul>
  • Shouldn’t the most inner loop be embedded in a <ul>? And each item withing a <li>?
  • Should the <div class="dropdown-menu"> surrounding the most inner anchor really be used?
5

@pavel, I’m just wondering if you have been able to solve the issue you presented…

6

I didn’t solve it yet. I have written pages using Bootstrap. It’s worked perfecly, 3th level menu especially.
I added successfully own css styles to Grav. Next I created pages structure via admin panel in Grav. All child pages are ordered and visible: true.
I have dumped this Twig children pages in the last-level folders. So this elements isn’t completely stripped from the page. They are only hidden, still space allocated on the DOM page. I have checked in Chrome Web Developer Tools and this children exist on own place.

It’s my pure HTML Bootstrap site that’s worked.

<div>
	<ul class="nav justify-content-center nav-pills">
		<li class="nav-item dropdown menus">
			<a href="#" class="nav-link dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Site 1</a>
			<ul class="dropdown-menu flex-column">
				<li>
					<a class="dropdown-item" href="#">Site 1.1</a>
				</li>
				<li>
					<a class="dropdown-item" href="#">Site 1.2</a>
				</li>
			</ul>
		</li>
		<li class="nav-item dropdown menus">

			<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Site 2</a>
			<ul class="dropdown-menu flex-column">
<li>
<a href="#" class="dropdown-item">Site 2.1</a>
</li>
<li>
<a href="#" class="dropdown-item">Site 2.2</a>
</li>

</ul>
	
		</li>
		<li class="nav-item dropdown menus">

			<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Site 3</a>
				<ul class="flex-column dropdown-menu">
					<li> 
<div class=" dropdown-submenu">
<a href="#" class="nav-link">Site 3.1</a>

<div class="dropdown-menu">
<a class="dropdown-item" tabindex="0" href="#">Site 3.1.1</a>
<a class="dropdown-item" href="#">Site 3.1.2</a>
<a class="dropdown-item" href="#">Site 3.1.3</a>
</div>
</div>
</li>
<li class="dropdown-submenu">
<a href="#" class="nav-link">Site 3.2</a>
<div class=dropdown-menu">
<a class="dropdown-item" tabindex="0" href="#">Site 3.2.1</a>
<a class="dropdown-item" href="#">Site 3.2.2</a>
</div>
</li>
</ul>
	</li>
		<li class="nav-item mb-5">
			<a href="#" class="nav-link disabled">Site 4</a>
		</li>
	</ul>
</div>
7

@pavel Uhhh, please enlighten me… what exactly is not working about the menu at the moment?

By the way, is this nav intended to be used as the main navigation bar? Like the one used by Quark? If so, any reason why you prefer the nav component over the navbar component?

I use the Bootstrap 4 navbar component exclusively for the websites I create. What I like about the navbar component is its responsiveness i.e. it collapses into a menu button (the hamburger) when the website is shown on a mobile device. The nav component does not collapse, it wraps. The navbar also has space for branding.

8

Everything works fine since I have changed from nav to navbar and I have taken div to out of internal loop scope. THANKS!