Creating navigation menus

Navigation menu can be generated by looping through list of pages on your site. Access to this list is possible through globally available object named site. This object has a property named menuitems which is a collection of menu_item objects each containing information about respective page.

A very simple code snippet to generate top-level navigation menu:

<ul id="menu">
  {% menulink site.root_item wrapper-tag="li" %}

  {% for item in site.menuitems %}

    {% menulink.item wrapper-tag="li" %}
  {% endfor %}
</ul>

Notice the usage of site property root_item which is a special menu_item object representing your site's front page.

Each menu_item object has access to the children of the page it represents. This allows us to generate submenus. Let's see an example where a second-level menu will be generated:

{% for level_1 in site.menuitems %}
  {% if level_1.selected? %}
    <ul id="submenu">
      {% for level_2 in level_1.children %}
        {% menulink.level_2 wrapper-tag="li" %}
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

Adding extra levels is just going deeper and iterating through the children of menu items.

Site menu can be extended for in administration view with menuadd and menubtn. Visible, hidden, active and untranslated menuitems are taken into accont. See more from site properties and menu item properties.

<ul class="mainmenu">
  {% unless site.root_item.hidden? %} 
    {% menulink site.root_item wrapper-tag="li" %} 
  {% endunless %} 
	
  {% for item in site.visible_menuitems %}
    {% menulink item wrapper-tag="li" %}
  {% endfor %} 
	
  {% if editmode %} 
    {% if site.hidden_menuitems.size > 0 %}
      <li>{% menubtn site.hidden_menuitems %}</li>
    {% endif %}
    <li>{% menuadd %}</li>
  {% endif %}
</ul>

A quite typical submenu showing two levels of subpages of active first level page.

<ul class="level-1-menu">
  {% for level_1 in site.menuitems_with_hidden %}
    <li class="level-1-item">
      {% menulink level_1 %} 
      {% if level_1.selected? %} 
        {% if editmode or level_1.children? %}
          <ul class="level-2-menu">
            {% for level_2 in level_1.visible_children %}
              <li class="level-2-item">
              {% menulink level_2 %}
              {% if level_2.selected? %} 
                {% if editmode or level_2.children? %}
                  <ul class="level-3-menu">
                    {% for level_3 in level_2.visible_children %}
                      <li class="level-3-item">{% menulink level_3 %}</li>
                    {% endfor %}
                    {% if editmode %} 
                      {% if level_2.hidden_children.size > 0 %}
                        <li>{% menubtn level_2.hidden_children %}</li>
                      {% endif %}
                      <li>{% menuadd parent="level_2" %}</li>
                    {% endif %}
                  </ul>
                {% endif %}
              {% endif %}
              </li>
            {% endfor %}
            {% if editmode %}
              {% if level_1.hidden_children.size > 0 %}
                <li>{% menubtn level_1.hidden_children %}</li>
              {% endif %}
              <li class="last">{% menuadd parent="level_1" %}</li>
            {% endif %}
          </ul>
        {% endif %}
      {% endif %}
    </li>
  {% endfor %}
</ul>

For more complex structure menus can be also built without {% menulink %} tag:

<ul class="menu">
  {% unless site.root_item.hidden? %}
    <li class="menu-item">
      <a class="menu-link{% if site.root_item.selected? %} active{% endif %}" href="{{ site.root_item.url }}">{{ site.root_item.title }}</a>
    </li>
  {% endunless %}
  {% for item in site.visible_menuitems %}
    <li class="menu-item">
      <a class="menu-link{% if item.selected? %} active{% endif %}{% unless item.translated? %} untranslated fci-editor-menuadd{% endunless %}" href="{{ item.url }}">{{ item.title }}</a>
    </li>
  {% endfor %}
</ul>

Read more about configurating {% menulink %} tag here.