1

I need to output different HTML for children of navigation. When i use

{% set entries = craft.entries.section('pages') %}

<ul id="nav">
    {% nav entry in entries %}
        <li class="whatever">
            <a href="{{ entry.url }}">{{ entry.title }}</a>
            {% ifchildren %}
                <ul>
                    {% children %}
                </ul>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>

It outputs my children having class="whatever" as well. I don't want that, i need something else for the children.

I saw the post here: Custom or complex nav tag about using LEVEL however i don't quite understand how i would write the code for that. Could anybody help? Thanks!

5

I think you need to set a conditional for the entry level for the parent, which is 1.

{% set entries = craft.entries.section('pages') %}

<ul id="nav">
    {% nav entry in entries %}
        <li{% if entry.level == 1 %} class="whatever"{% endif %}>
            <a href="{{ entry.url }}">{{ entry.title }}</a>
            {% ifchildren %}
                <ul>
                    {% children %}
                </ul>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>
| improve this answer | |
  • Thanks Chris. I ended up outputting it with this, a lot of conditionals (because there was more to be changed than i showed for simplicities sake) but it seems to do the trick so it'll work. – Christopher Healey Feb 10 '15 at 20:46
1

As the children inherit the settings between the {% nav %}...{% endnav %} so to show an active state on a navigation use...

<ul>
    {% nav entry in craft.entries.section('entry') %}                               
        <li class="
            {% if craft.request.getSegment(1) == entry.slug or 
                  craft.request.getSegment(2) == entry.slug %}
                selected
            {% endif %}
            {% if craft.entries.section('entry').descendantOf(entry).find() | length > 0 %}
                has-children
            {% endif %}
        ">
            {{ entry.getLink() }}
            {% ifchildren %}
                <ul>
                    {% children %}
                </ul>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>

Or use entry.level to target the different levels if you need to.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.