Drawing navigation

A foundational element to a website CMS is a good simple navigation library that can easily be queried to extract out the users navigation.

Background

When rendering pages in the CMS, you are going to need to render a page tree at some stage, whether it be a primary/secondary navigation, fixed footer links or breadcrumbs. For any element, you are going to quickly need to know where you are in the tree, what pages are above and below and whether links are active to this page.

Obtain the top level navigation

Using a call to nav.top(node) is an easy way to find the top level navigation elements at the top of the supplied node. Note: This is the same as using nav.children(node, 1) which obtains the children from the top level of this node.

** Example primary navigation **

<ul>
    {% for page in nav.top(node) %}
        {# Note the use of nav.active(page) which returns true/false for if the page is selected currently #}
        <li{% if nav.active(page) %} class="active"{% endif %}>
            <a href="{{ nav.url(page) }}">
                {{ page.label }}
            </a>
        </li>
    {% endfor %}
</ul>

Obtaining children of a specific node

Using the call to nav.children(node) you can obtain the links to the children of a supplied node. This is useful for showing subpages for instance.

** Example of a more complex primary/secondary links **

<ul class="depth-primary">
    {# By passing a secondary parameter "2" to the query, it will obtain the children at depth 2 along the path to the supplied node. #}
    {% for primary in nav.children(node, 2) %}
        <li{% if nav.active(primary) %} class="active"{% endif %}>
            <a href="{{ nav.url(primary) }}">
                {{ primary.label }}
            </a>
            {% if nav.active(primary) %}
                <ul class="depth-secondary">
                    {% for secondary in nav.children(primary) %}
                    <li{% if nav.active(secondary) %} class="active"{% endif %}>
                        <a href="{{ nav.url(secondary) }}">
                            {{ secondary.label }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>

Specifying a specific node to draw children for

You may choose to render a specific set of links for a particular node. You can optionally pass the node ID or URL and obtain the children. e.g. nav.children('/path/to/page')

Example to render all the children underneath node 12

<ul>
    {# Pass in either the node, id or URL to the children function to obtain the found children #}
    {% for page in nav.children(12) %}
        <li{% if nav.active(page) %} class="active"{% endif %}>
            <a href="{{ nav.url(page) }}">
                {{ page.label }}
            </a>
        </li>
    {% endfor %}
</ul>

Obtaining the path to a specific node

For obtaining the active path to the specific node, you can call the nav.path(node) function.

Example breadcrumbs to current page

<ul>
    {% for page in nav.path(node) %}
        <li>
            <a href="{{ nav.url(page) }}">
                {{ page.label }}
            </a>
        </li>
    {% endfor %}
</ul>