• ♡ Sponsor

    Recursive Navigations

    #Navigation #Pagelist #Recursion

    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 menu snippet of the theme skeleton package. 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 @>
    

    Related

    Toolbox  ⁄
    breadcrumbs — Toolbox

    Creates the markup for a breadcrumb trail to the current page.

    Toolbox  ⁄
    nav — Toolbox

    Creates a simple HTML list as navigation below a given page. This method basically serves as a shorthand version of a foreach loop iterating over a pagelist of type "children".

    Toolbox  ⁄
    navChildren — Toolbox

    This method is a shorthand version of the nav method, using the current page as the parent context.

    Toolbox  ⁄
    navSiblings — Toolbox

    This method is a shorthand version of the nav method, using the parent page of the current page as the parent context. The included pages are therefore all siblings of the current page.

    Toolbox  ⁄
    navTop — Toolbox

    This method is a shorthand version of the nav method, using the homepage "/" page as the parent context.

    Toolbox  ⁄
    navTree — Toolbox

    Generates the HTML for a full site tree. This method can be used as a shorthand for recursively iterating over pagelists to create nested lists of page links.

    Toolbox  ⁄
    newPagelist — Toolbox

    Creates a new pagelist object. The current pagelist will be replaced. A foreach loop can be used to iterate over the pagelist object. This method does not have any output. To only update the configuration of the current pagelist, without resetting all other parameters, the ...

    Toolbox  ⁄
    pagelist — Toolbox

    Modifies the currently defined pagelist pagelist object. Only specified options will be changed, all others will be preserved. To restore a default pagelist and reset all options, the newPagelist method can be used.

    Template Language  ⁄
    Objects — Template Language

    Objects in Automad are conceptually just lists containing iteratable items to be used in foreach loops. Such lists are automatically populated with default sets of elements while rendering a page. They always exist. The actual content of any object is depending on the current ...

    Objects  ⁄
    Pagelist — Objects

    The pagelist contains by default all pages which are not hidden and therefore has no defined type. Changing the pagelist type to one of the following available types will update the selection of pages accordingly. The main purpose of this object is to provide an easy way of ...

    Objects  ⁄
    Filters — Objects

    The filters object is a unique list of tags associated with pages of the current pagelist. A good example of the usage of the filters object can be found here. You can use the :filter variable to get the current filter tag while looping over the filters object.

    Control Structures  ⁄
    foreach — Control Structures

    The foreach loop iterates over objects. Depending of the type of the object in use, Automad provides different runtime variables within the code block of the loop to refer to items of the object. The :i variable refers to the index of the current iteration in the loop.

    Template Language  ⁄
    Snippets — Template Language

    The snippet statement allows for defining reusable code snippets and is therefore also the basis for any kind of recursion in Automad. A snippet always inherits the context of the calling code. To use a snippet, it is enough to put the snippet's name in statement delimiters.

    Template Language  ⁄
    Includes — Template Language

    In many cases, different templates across a theme use recurring components such as a header, a navbar or a footer. Those elements can be stored in separate files and included whenever needed. To include such an external snippet, simply wrap its path relative to the current file ...

    • Automad
    • Developer Guide
    • Building Themes
    • Template Language
    • Recursive Navigations
    Discuss
    Packages
    Release Notes
    Support
    Terms of Use
      Become a Sponsor
      GitHub
      Twitter
      Facebook
      Instagram
      2013-2022 by Marc Anton Dahmen
    Released under the MIT license

    A faceless machine, creating one's portrait in the internet.
  • Automad
  • Getting Started
  • System
  • User Guide
  • Developer Guide
  • Headless Mode
  • Discuss
  • Packages
  • Developer Guide ←
  • Building Themes ←
  • Template Language
  • Variables →
  • Pipe →
  • Toolbox →
  • Objects →
  • Control Structures →
  • Snippets
  • Includes
  • Inheritance
  • Using Extensions
  • Recursive Navigations
  • Working with Images
  • Multilingual Content