Main navigation

The main navigation shows users the key areas of your site and helps them to find what they are looking for. 

Default

The main navigation is horizontal. It displays at the top of your site. Users can navigate between related sections of content, showing one section at a time. 

<nav id="main-navigation" class="nsw-navigation " 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">
      <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <span class="sr-only">Close Menu</span>
    </button>
  </div>
  <ul class="nsw-navigation__list">
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">About DPC</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Updates</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Publications</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Tools &amp; Resources</span>
        </a>
      </li>
  </ul>
</nav>

 

Copy

Mega menu

The mega menu allows you to expand the selected navigation item to show its child pages.  

<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">
      <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <span class="sr-only">Close Menu</span>
    </button>
  </div>
  <ul class="nsw-navigation__list">
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">About DPC</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
          <div class="nsw-subnavigation" id="subnav-914d7e2" role="region" aria-label="About DPC Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-914d7e2" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span>Back<span class="sr-only"> to previous menu</span></span>
              </button>
            
              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <h2 class="nsw-subnavigation__title">
              <a href="#" class="nsw-subnavigation__title-link">
                About DPC
              </a>
            </h2>
            <p class="nsw-subnavigation__description">Filium morte multavit si sine causa? quae fuerit causa, nollem.</p>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                    <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
                      <use xlink:href="#chevron"></use>
                    </svg>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-1138" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-1138" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                        <li class="nsw-subnavigation__list-item">
                          <a href="#" class="nsw-subnavigation__link">
                            <span class="nsw-navigation__link-text">Level 3</span>
                          </a>
                        </li>
                        <li class="nsw-subnavigation__list-item">
                          <a href="#" class="nsw-subnavigation__link">
                            <span class="nsw-navigation__link-text">Level 3</span>
                          </a>
                        </li>
                        <li class="nsw-subnavigation__list-item">
                          <a href="#" class="nsw-subnavigation__link">
                            <span class="nsw-navigation__link-text">Level 3</span>
                          </a>
                        </li>
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Updates</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
          <div class="nsw-subnavigation" id="subnav-3250fbee" role="region" aria-label="Updates Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-3250fbee" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span>Back<span class="sr-only"> to previous menu</span></span>
              </button>
            
              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <h2 class="nsw-subnavigation__title">
              <a href="#" class="nsw-subnavigation__title-link">
                Updates
              </a>
            </h2>
            <p class="nsw-subnavigation__description"></p>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Publications</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
          <div class="nsw-subnavigation" id="subnav-bd48c03b" role="region" aria-label="Publications Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-bd48c03b" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span>Back<span class="sr-only"> to previous menu</span></span>
              </button>
            
              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <h2 class="nsw-subnavigation__title">
              <a href="#" class="nsw-subnavigation__title-link">
                Publications
              </a>
            </h2>
            <p class="nsw-subnavigation__description"></p>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Tools &amp; Resources</span>
          <svg class="nsw-icon nsw-navigation__link-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#chevron"></use>
          </svg>
        </a>
          <div class="nsw-subnavigation" id="subnav-c457a536" role="region" aria-label="Tools &amp; Resources Submenu">
            <div class="nsw-subnavigation__header">
              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-c457a536" aria-expanded="true">
                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                  <use xlink:href="#chevron"></use>
                </svg>
                <span>Back<span class="sr-only"> to previous menu</span></span>
              </button>
            
              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <span class="sr-only">Close Menu</span>
              </button>
            </div>
            <h2 class="nsw-subnavigation__title">
              <a href="#" class="nsw-subnavigation__title-link">
                Tools &amp; Resources
              </a>
            </h2>
            <p class="nsw-subnavigation__description"></p>
            <ul class="nsw-subnavigation__list">
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
                <li class="nsw-subnavigation__list-item">
                  <a href="#" class="nsw-subnavigation__link">
                    <span class="nsw-navigation__link-text">Level 2</span>
                  </a>
                  <div class="nsw-subnavigation" id="subnav-" role="region" aria-label="Level 2 Submenu">
                    <div class="nsw-subnavigation__header">
                      <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="subnav-" aria-expanded="true">
                        <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
                          <use xlink:href="#chevron"></use>
                        </svg>
                        <span>Back<span class="sr-only"> to previous menu</span></span>
                      </button>
                    
                      <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
                        <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
                          <use xlink:href="#close"></use>
                        </svg>
                        <span class="sr-only">Close Menu</span>
                      </button>
                    </div>
                    <h2 class="nsw-subnavigation__title">
                      <a href="#" class="nsw-subnavigation__title-link">
                        Level 2
                      </a>
                    </h2>
                    <p class="nsw-subnavigation__description"></p>
                    <ul class="nsw-subnavigation__list">
                    </ul>
                  </div>
                </li>
            </ul>
          </div>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Contact us</span>
        </a>
      </li>
  </ul>
</nav>

 

Copy

Devices smaller than 768px

For users browsing using smaller devices, the navigation is provided through the hamburger menu in the header pattern.

 

 

The main navigation shows the top-level detail of your Information Architecture (IA).  

If you are using the mega menu, an additional level of your IA is displayed. A chevron indicates when a mega menu is available.  

Because the main navigation is a horizontal list, it won’t support a large number of items.  When defining your IA, this will need to be taken into consideration.

On smaller devices, the main nav collapses down to a conventional hamburger menu.  

The labels must be clear, logical and predictable. 

You can use the main navigation without the mega menu. In this instance the side navigation should also be used on sites greater than 1 level deep. This will allow your users to find what they are looking for beyond the top level. 

On sites with more than 1 level of navigation, you can provide more context with a mega menu. This displays the second level of your IA. 

On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.