Skip to content

Instantly share code, notes, and snippets.

@benald
Created November 29, 2018 00:45
Show Gist options
  • Save benald/89f92027f2e3f46c1c82b6b15f197175 to your computer and use it in GitHub Desktop.
Save benald/89f92027f2e3f46c1c82b6b15f197175 to your computer and use it in GitHub Desktop.
Nunjucks Multi Level Navigation Template
// 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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment