5.10 Side navigation View in a new window
Example
Markup
{% set item = item|default({
"parentText": "Asbestos",
"parentUrl": "#",
"parentId": "id",
"navitems": [
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false,
"navitems": [
{
"text": "Level 3",
"url": "#",
"currentPage": true
},
{
"text": "Level 3",
"url": "#",
"currentPage": false
},
{
"text": "Level 3",
"url": "#",
"currentPage": false
}
]
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
}
]
}
) %}
<nav class="nsw-sidenav" aria-labelledby="{{item.parentId}} side navigation">
<div class="nsw-sidenav__header">
<h2 id="{{item.parentId}}" class="nsw-sidenav__heading">
<a href="{{item.parentUrl}}" class="nsw-sidenav__heading-link">{{item.parentText}}</a></h2>
</div>
<ul class="nsw-sidenav__list nsw-sidenav__list--level-1 m-0 p-0">
{% for data in item.navitems %}
<li class="nsw-sidenav__list-item mt-0 {% if data.navitems %} has-active-children {% endif %}">
<a href="{{data.url}}" class="nsw-sidenav__link {% if data.currentPage %} is-current {% endif %}">
{{data.text}}
</a>
{% if data.navitems %}
<ul class="nsw-sidenav__list nsw-sidenav__list--level-2 m-0 p-0">
{% for children in data.navitems %}
<li class="nsw-sidenav__list-item mt-0 {% if children.navitems %} has-active-children {% endif %}">
<a href="{{children.url}}" class="nsw-sidenav__link {% if children.currentPage %} is-current {% endif %}">
{{children.text}}
</a>
{% if children.navitems %}
<ul class="nsw-sidenav__list nsw-sidenav__list--level-3 m-0 p-0">
{% for innerChildren in children.navitems %}
<li class="nsw-sidenav__list-item mt-0 {% if innerChildren.navitems %} has-active-children {% endif %}">
<a href="{{innerChildren.url}}" class="nsw-sidenav__link {% if innerChildren.currentPage %} is-current {% endif %}">
{{innerChildren.text}}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>