Displaying a Navigation for a Structure Section

Craft makes it very easy to create navigations based on Structure sections. The way you’ll do it depends on whether you want the nav to be multi-level or not.

Top Level Only #

If you just want to show entries in the top level of your section, use the level param to find just those top-level entries:

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

With the entries in hand, you can now loop through them using plain ol’ for-loop:

        {% for page in pages %}
            <li>{{ page.getLink() }}</li>
        {% endfor %}

Multi-Level #

If you want to create a multi-level nav with nested <ul>s, first get the entries you want to show.

If you want all of the entries in the section, just do this:

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

You can also just fetch the entries up to a certain level using the level param:

{% set pages = craft.entries.section('pages').level('<= 2').all() %}

To output the entries as nested <ul>s, you will need to use the {% nav %} tag:

        {% nav page in pages %}
                {{ page.getLink() }}
                {% ifchildren %}
                        {% children %}
                {% endifchildren %}
        {% endnav %}

The {% nav %} tag’s syntax mimcs the {% for %} tag, with the key addition of the {% ifchildren %}, {% children %}, and {% endifchildren %} sub-tags.

{% children %} is the only required sub-tag. It tells Craft where to insert the child entries, if any. It will be replaced by the entire contents of your {% nav %}{% endnav %} tag pair, and it works recursively – if you have three or more levels of entries to loop through, the second level’s {% children %} tag will get swapped out once more with the third level’s entries, and so on.

{% ifchildren %} and {% endifchildren %} are optional, and allow you to set some HTML that wraps the {% children %} tag, but only if there actually are children.