Simple navigation

Simple navigation

To create simple navigation for site with puffer liquid use:

<ul class="navigation">
  {% for page in root.children %}
    {% if page.current? %}
      <li class="selected"><span>{{ page.name }}</span></li>
    {% elsif page.ancestor? %}
      <li class="selected"><a href="{{ page.path }}">{{ page.name }}</a></li>
    {% else %}
      <li><a href="{{ page.path }}">{{ page.name }}</a></li>
    {% endif %}
  {% endfor %}
</ul>

Let me explain. For every first-level page we create li element. If page.current? is true then we are currently view this page. If page.ancestor? is true then we currently view one of the page descendants