Nunjucks Multi Level Navigation Template

nunjucks-multilevel-navigation

// JSON Structure
[{
        "title": "Home",
        "name": "index"
    },
    {
        "title": "Find a service",
        "name": "find a service"
    },
    {
        "title": "Intranet A to Z",
        "name": "a-to-z"
    },
    {
        "title": "Extras",
        "name": "extras",
        "children": [
            {
                "title": "Search Results",
                "name": "search"
            },
            {
                "title": "Narrative Service",
                "name": "narrative service"
            },
            {
                "title": "Categories",
                "name": "categories"
            },
            {
                "title": "Blank",
                "name": "blank"
            }
        ]
    }
   
]
// HTML Structure
{% for val in site.data.menu %}
    {% if val.children %}
        <li class="dropdown nav-item show-dropdown-on-collapse">
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" role="button">
                <span class="navbar-text-truncate">{{ val.title }}</span>
                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
                    <use href="/images/icons/icons.svg#caret-bottom" />
                </svg>
            </a>
            <div aria-labelledby="" class="dropdown-menu">
                {% for val in val.children %}
                <a class="nav-link" href="{{ val.name | replace(" ", "- ") | lower }}.html">
                    {{ val.title }}
                </a>
                {% endfor %}
            </div>
        </li>
    {% else %}
        <li class="nav-item">
            <a class="nav-link" href="{{ val.name | replace(" ", "- ") | lower }}.html">
                <span class="navbar-text-truncate">{{ val.title }}</span>
            </a>
        </li>
    {% endif %}
{% endfor %}