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 }}</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.

Template API

Discuss

Creating a navigation menus