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>