4.4 Navigation View in a new window
Example
Markup
{% set navitems = navitems|default([
{
"text": "Identify asbestos",
"url": "#",
"svgUrl":".",
"description": "Filium morte multavit si sine causa? quae fuerit causa, nollem.",
"subnav": [
{
"text": "How to maintain asbestos?",
"url": "#",
"id": "1138",
"subnav": [
{
"text": "Level 3",
"url": "#"
},
{
"text": "Level 3",
"url": "#"
},
{
"text": "Level 3",
"url": "#"
}
]
},
{
"text": "Find asbestos products",
"url": "#"
},
{
"text": "What is asbestos ?",
"url": "#"
},
{
"text": "How do I know if its asbestos?",
"url": "#"
},
{
"text": "How do I manage asbestos?",
"url": "#"
},
{
"text": "Level 2",
"url": "#"
},
{
"text": "Level 2",
"url": "#"
},
{
"text": "Level 2",
"url": "#"
},
{
"text": "Level 2",
"url": "#"
}
]
},
{
"text": "Removal and Disposal",
"url": "#"
},
{
"text": "Safety",
"url": "#"
},
{
"text": "Health risks",
"url": "#"
},
{
"text": "Who to contact",
"url": "#"
}
]) %}
{% set svgUrl= svgUrl|default('.') %}
<nav id="main-navigation" class="nsw-navigation js-mega-menu" aria-label="Main menu">
<div class="nsw-navigation__header">
<h2 id="nsw-navigation">Menu</h2>
<button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
<img src="{{svgUrl}}/images/close.svg" class="nsw-icon icon">
<span class="sr-only">Close Menu</span>
</button>
</div>
<ul class="nsw-navigation__list">
{% for item in navitems %}
<li class="nsw-navigation__list-item">
<a href="{{item.url}}" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="subnav-{{item.text}}">
<span class="nsw-navigation__link-text">{{item.text}}</span>
{% if item.subnav %}
<img src="{{item.svgUrl}}/images/chevron.svg" class="nsw-navigation__link-icon">
{% endif %}
</a>
{% if item.subnav %}
<div class="nsw-subnavigation" id="subnav-{{item.text}}" role="region" aria-label="{{item.text}} Submenu">
<div class="nsw-subnavigation__header">
<button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-{{item.id}}" aria-expanded="true">
<img src="{{item.svgUrl}}/images/chevron.svg" class="nsw-icon nsw-icon--rotate-180">
<span class="mt-2">Back<span class="sr-only"> to previous menu</span></span>
</button>
<button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
<img src="{{item.svgUrl}}/images/close.svg" class="nsw-icon icon">
<span class="sr-only">Close Menu</span>
</button>
</div>
<h2 class="nsw-subnavigation__title">
<a href="{{item.url}}" class="nsw-subnavigation__title-link">
{{item.text}}
</a>
</h2>
<p class="nsw-subnavigation__description">{{item.description}}</p>
<ul class="nsw-subnavigation__list mt-0">
{% for items in item.subnav %}
<li class="nsw-subnavigation__list-item">
<a href="{{items.url}}" class="nsw-subnavigation__link">
<span class="nsw-navigation__link-text">{{items.text}}</span>
{% if items.subnav %}
<img src="{{item.svgUrl}}/images/chevron.svg" class="nsw-navigation__link-icon">
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
<li class="nsw-navigation__list-item d-block d-md-none">
<a href="{{item.url}}" class="nsw-navigation__link" role="button" aria-expanded="false" aria-controls="subnav-{{item.text}}">
<span class="nsw-navigation__link-text">For councils</span>
</a>
</li>
<li class="nsw-navigation__list-item d-block d-md-none">
<select id="changeLanguage" class="nsw-form-select" aria-describedby="changeLanguage-helper-text changeLanguage-error-text">
<option class="nsw-navigation__link-text" value="">Change Language</option>
<option class="nsw-navigation__link-text" value="1">Option 1</option>
<option class="nsw-navigation__link-text" value="2">Option 2</option>
<option class="nsw-navigation__link-text" value="3">Option 3</option>
</select>
</li>
</ul>
</nav>