Page navigation

Outputting a site navigation using the configuration set within the Site Builder

Multi-level navigation

The below example outputs a multilevel navigation meant to be used for a dropdown menu. It contains logic to add classes to elements based on if the nav item has children or if the current page the user is on matches the nav item.

<ul class="nav navbar-nav navbar-right">
{% for item in linklists.mainmenu recursive -%}
<li class="{%- if item.children %}dropdown{% endif %}{% if page.path == item.link %} active{% endif %}{% for sub_item in item.children %}{% if page.path == sub_item.link %} active{% endif %}{% endfor %}">
  {%- if item.children %}
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ item.name|safe }} <span class="caret"></span></a>
    <ul class="dropdown-menu">
      {% for sub_item in item.children %}
        <li><a href="{{ sub_item.link }}">{{ sub_item.name|safe }}</a></li>
      {% endfor %}
    </ul>
  {% else %}
    <a href="{{ item.link }}">{{ item.name|safe }}</a>
  {% endif %}
{%- endfor -%}
</ul>