craft nav

gistfile1.txt

Template Syntax Error

Unexpected tag name "endifchildren" (expecting closing tag for the "nav" tag defined near line 24)

/Users/lukeholder/Code/Work/teninacraft/craft/templates/_partials/_topbar.html(24)


22         {% set pages = craft.entries.section('pages').find() %}
23         {% nav page in pages %}
24             <li class="{% ifchildren %}has-dropdown{% endifchildren %}">
25             <a href="">{{ page.title }}</a>
26                 {% ifchildren %}
27                     <ul class="dropdown">
28                         {% children %}
29                         <li class="divider"></li>
30                     </ul>
31                 {% endifchildren %}
32             </li>
33             <li class="divider"></li>
34         {% endnav %}

nav.twig

{% set pages = craft.entries.section('pages').find() %}
        {% nav page in pages %}
            <li class="{% ifchildren %}has-dropdown{% endifchildren %}">
            <a href="">{{ page.title }}</a>
                {% ifchildren %}
                    <ul class="dropdown">
                        {% children %}
                        <li class="divider"></li>
                    </ul>
                {% endifchildren %}
            </li>
            <li class="divider"></li>
        {% endnav %}

That's because you can only have one instance of those tags, and they must be top-level tags within {% nav %}.

Behind the scenes, Craft is splitting the contents of {% nav %}...{% endnav %} into 4 chunks based on the location of those tags ("upper body", "lower body", "indent", and "outdent"). With those four chunks it's able to loop through your entries and form your navigation non-recursively, using this technique.

The only real problem with that approach is that it's not possible to tell ahead of time whether it'll turn out that an entry has children, since that won't be determined until the loop actually gets to one of the child entries.

You could do this, but keep in mind that it's going to add a new SQL query per entry:

<li class="{% if craft.entries.descendantOf(page).length %}has-dropdown{% endif %}">

I suppose another option would be that we loop through all of the entries ahead of time, and set a "nav.hasChildren" variable as well, so it would be possible to determine whether there are children without adding any DB queries. Slightly more PHP work going on, but it shouldn't be noticeable.

yeah needing to generate in this format for foundation menu generation so a nav.hasChildren would be beneficial. Thanks.

for anyone else that comes across this brandons example should be:

<li class="{% if craft.entries.descendantOf(page)|length %}has-dropdown{% endif %}">

|length not .length

I know i'm going to need this later on, so thanks.