Hi Mad,
I've played around with the tutorial for "Recursive Navigations" and I think for a better and more valid generated markup the tutorials (can be found here and here) need a little extra additional code.
The "problem" at the moment is that a empty <ul></ul>
construct is being generated, when a page has no subpages. You can see that live e.g. in generated sourcecode of the menu here: https://dev.automad.org/tutorials/navigation
For example under <li><a href="/contact">Contact</a>
there is an empty <ul class="menu-list"></ul>
without any <li></li>
.
I solved this with an additional control structure:
<@ snippet navigation @>
<ul class="menu-list">
<@ foreach in pagelist @>
<li>
<a href="@{ url }">
@{ title }
</a>
<# Check if the page has subpages. #>
<@ if @{ :pagelistCount } > '0' @>
<# Call snippet recursively. #>
<@ navigation @>
<@ end @>
</li>
<@ end @>
</ul>
<@ end @>
<@ newPagelist {
type: 'children',
excludeHidden: false
} @>
<@ with '/' @>
<@ navigation @>
<@ end @>
I thought it might be a help for you and other users 🙂
Thanks!