For one of my projects I had to split the upper-level of my menu from possible sub-pages.

I used the static-pages plugin to define my main-menu and used a partial to display the menu-items:

main-menu
{% partial 'main-menu' items=mainmenu.menuItems class='nav-list' %}

[viewBag]
==
<ul class="{{ class }}">
   {% for item in items %}
       <li class="{{ item.isActive or item.isChildActive ? 'active' : '' }}"
             ><a  href="{{ item.url }}">
                {{ item.title }}    
            </a>
        </li>

    {% endfor %}
</ul>

And for the second level of the menu:
{% partial 'sub-menu' items=mainmenu.menuItems class='subnav-list' %}

<ul class="{{ class }}">
     {# traverse through every item of the menu #}
     {% for item in items %}

         {# if active, or one of its childs #}
         {% if (item.isActive or item.isChildActive) %}

               {# Built the submenu #}
               {% if item.items %}
                    {% for sub in item.items %}
                      <a  href="{{ sub.url }}">
                          {{ sub.title }}
                       </a>
                   {% endfor %}
              {% endif %}

        {% endif %}
   {% endfor %}
</ul>

Last updated 8 years ago