Multilevel navigation menus for NationBuilder

readme.md

These code snippets demonstrate a method to generate a multilevel list menu in NationBuilder using recursion. NationBuilder's flavor of Liquid doesn't play well recursively in a general sense, so this code uses subpage calls instead of includes to prevent infinite looping due to shared variables. Additionally, page.slug is used for links because the url variable displays errors after one iteration (NB serves all pages from root anyways so this shouldn't be an issue).

Usage: upload both snippets to your theme and change the {% include "nav" %} call in layout.html to {% include "root_nav" %}.

Note: These snippets have been stripped of all styling because neither NB nor Bootstrap 3 support multilevel menus, so you'll need to roll your own or find a multilevel navigation menu library to use.

_recursive_nav.html

{% comment %}
<!-- This partial calls itself recursively if there is more than one level of navigation -->
{% endcomment %}

{% if page.leaf? or page.nav_children.size == 0 %}
  <li>
    <a href="{{ page.slug }}">{{ page.name }}</a>
  </li>
{% else %}
  <li>
    <a href="{{ page.slug }}">{{ page.name }}</a>
    <ul>
      {% for navchild in page.nav_children %}
        {% subpage navchild with "recursive_nav" %}
      {% endfor %}
    </ul>
  </li>
{% endif %}

_root_nav.html

{% comment %}
<!-- This partial should be called from layout.html in lieu of the default _nav.html -->
{% endcomment %}

{% if site.root_nav_pages.size > 0 %}
  <ul>
  {% for navpage in site.root_nav_pages %}
    {% subpage navpage with "recursive_nav"%}
  {% endfor %}
  </ul>
{% endif %}