Recursive Navigations

Navigations and menus represent an essential part of any webiste. Automad provides convenient methods to iterate over the collection of pages recursively and therefore allows for creating site trees in a few simple steps. The basic concept behind a navigation tree in Automad is also illustrated with some example code in the Navigation tutorial. Conceptually building such a site tree can be divided into three steps.

Defining a Recursive Snippet

A recursive snippet is a snippet which calls itself conditionally. While iterating a pagelist of type children, the snippet will call itself to initiate a new iteration over the children of the currently iterated page. A typical snippet looks as follows:

<@ snippet navigation @>  
    <ul class="menu-list">       
        <@ foreach in pagelist @>
            <li>
                <a href="@{ url }">
                    @{ title }
                </a>
                <# Call snippet recursively. #>
                <@ navigation @>
            </li>
        <@ end @>
    </ul>
<@ end @>

Configuring the Pagelist

The pagelist has to be configured to be of type children. Note when doing so, it is important to not define the context parameter. The context will then be able to be changed recursively within the snippet defined above.

<@ newPagelist { 
    type: 'children',
    excludeHidden: false 
} @>

Changing the Context and Initiating the Recursion

In a last step the root context of the navigation tree has to be defined and the snippet has to be called once to initiate the recursion.

 <@ with '/' @>
    <@ navigation @>
 <@ end @>