Nav

Recursion

It’s possible to use recursive tags for semi-automatically creating deeply-nested lists of links as your navigations. A sample set-up looks something like this:

<ul>
   {{ nav from="/{segment_1}" max_depth="2" }}
      <li>
         <a href="{{ url }}"{{ if is_current || is_parent }} class="on"{{ /if }}>{{ title }}</a>
         {{ if is_current || is_parent }}
            {{ if children }}
               <ul>{{ *recursive children* }}</ul>
            {{ /if }}
         {{ /if }}
      </li>
   {{ /nav }}
</ul>

The {{ *recursive children* }} tag will repeat the contents of the entire {{ nav }} tag using child elements if they exist. This means that as long as there are children to display, and we’re still on either the current or parent page of those children, the nav tag will traverse deeper. If your scoped variables have trouble making it through to the next recursion, you can glue them to children like this: {{ *recursive children:my_scoped_variable* }}.

It’s an admittedly weird concept, and might take some fiddling with to truly understand, but is very powerful when fully understood. Take the time. Learn to wield it. A powerful Jedi will you be.

Children

If you want to take more control over your child menu, you can just loop through the children array within your menu, instead of repeating the contents of the child elements with {{ *recursive children* }}.

{{ if is_current || is_parent }}
  {{ if children }}
     <ul>
      {{ children }}
        <li><a href="{{ url }}">{{ title }}</a></li>
      {{ /children }}
     </ul>
  {{ /if }}
{{ /if }}

Hidden Pages

A common use-case for navigation is to make some pages “hidden”, which means to hide them from the nav, but keep them available when accessed directly.

Note: In Statamic v1, you should set the status to hidden or prefix the filename with an underscore. In v2, this method has been removed in favor of the following workflow.

1. Add a field to your page fieldset that’ll be used to indicate a “hidden” page:

   fields:
     is_hidden:  # the field name can be whatever you want
       type: toggle
       display: Hide from navigation
   

2. In your nav tag, use the conditions syntax to remove any hidden pages:

   {{ nav from="/" is_hidden:isnt="true" }}
      ...
   {{ /nav }}
   

   This is saying, only show pages where the is_hidden field isn’t set to true. That will leave you with unhidden pages. Remember, the field can be named whatever you want.

Parameters

Variables