Change theme:   

Creating a 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">
<li><a href="{{ site.root_item.url }}">{{ site.root_item.title }}</a></li>
{% for item in site.menuitems %}
<li><a href="{{ item.url }}">{{ item.title }}</a></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 item in site.menuitems %}
  {% if item.selected? %}
  <ul id="submenu">
    {% for level2 in item.children %}
    <li><a href="{{ level2.url }}">{{ level2.title }}</a></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 menuitem properties.

 <ul class="mainmenu">
  {% unless site.root_item.hidden? %}
    <li{% if site.root_item.selected? %} class="active"{% endif %}>
      <a href="{{site.root_item.url}}">{{site.root_item.title}}</a>
    </li>
  {% endunless %}
  {% for item in site.visible_menuitems %}
    <li{% if item.selected? %} class="active"{% endif %}{% unless item.translated? %} class="untranslated"{% endunless %}>
      <a href="{{item.url}}">{{item.title}}</a>
    </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. 

 {% for item in site.menuitems_with_hidden %}
  {% if item.selected? %}
    {% if editmode or item.children? %}
      <ul class="submenu">
        {% for level2 in item.visible_children %}
          <li{% unless level2.translated? %} class="untranslated"{% endunless %}>
            <a href="{{ level2.url }}"{% if level2.selected? %} class="active"{% endif %}>{{ level2.title }}</a>
            {% if level2.selected? %}
              {% if editmode or level2.children? %}
                <ul>
                  {% for level3 in level2.visible_children %}
                    <li{% unless level3.translated? %} class="untranslated"{% endunless %}>
                      <a href="{{ level3.url }}"{% if level3.selected? %} class="active"{% endif%}>{{ level3.title }}</a>
                    </li>
                  {% endfor %}
                  {% if editmode %}
                    {% if level2.hidden_children.size > 0 %}
                      <li>{% menubtn level2.hidden_children %}</li>
                    {% endif %}
                    <li>{% menuadd parent="level2" %}</li>
                  {% endif %}
                </ul>
              {% endif %}
            {% endif %}
          </li>
        {% endfor %}
        {% if editmode %}
          {% if item.hidden_children.size > 0 %}
            <li>{% menubtn item.hidden_children %}</li>
          {% endif %}
          <li class="last">{% menuadd parent="item" %}</li>
        {% endif %}
      </ul>
    {% endif %}
  {% endif %}
{% endfor %}