6.2.3 Menu open View in a new window

Levels 1 to 3, with the menu open.

Twig: components/mega-menu/mega-menu-child.twig

Markup
<nav class="mega-menu" role="navigation" aria-label="Main menu">
  <ul class="mega-menu__level-1" role="menubar">
    <li class="mega-menu__primary-item">
      <a href="#" class="mega-menu__primary-link">Future students</a>
    </li>
    <li class="mega-menu__primary-item">
      <a href="#" class="mega-menu__primary-link">Current students</a>
      <div class="mega-menu__wrapper" role="menu" aria-hidden="false">
        <div class="mega-menu__inner">
          <ul class="mega-menu__level-2">
            <li class="mega-menu--leading-item">
              <a href="#">Overview</a>
            </li>
            <li>
              <a href="#">Managing your course</a>
              <ul class="mega-menu__level-3">
                <li>
                  <a href="#">Your enrolment</a>
                </li>
                <li>
                  <a href="#">Fees and payment</a>
                </li>
                <li>
                  <a href="#">Your student info</a>
                </li>
                <li>
                  <a href="#">Classes and assessment</a>
                </li>
                <li>
                  <a href="#">Graduation</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Opportunities</a>
              <ul class="mega-menu__level-3">
                <li>
                  <a href="#" class="{{ modifier_class }}">Scholarships, prizes and awards</a>
                </li>
                <li>
                  <a href="#">Overseas opportunities</a>
                </li>
                <li>
                  <a href="#">Community and leadership programs</a>
                </li>
                <li>
                  <a href="#">Career development</a>
                </li>
                <li>
                  <a href="#">Work opportunities</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Support</a>
              <ul class="mega-menu__level-3">
                <li>
                  <a href="#">Academic support</a>
                </li>
                <li>
                  <a href="#">Health and wellbeing</a>
                </li>
                <li>
                  <a href="#">Financial help</a>
                </li>
                <li>
                  <a href="#">Accommodation</a>
                </li>
                <li>
                  <a href="#">When things go wrong</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Campus life</a>
              <ul class="mega-menu__level-3">
                <li>
                  <a href="#">Your campus</a>
                </li>
                <li>
                  <a href="#">Communication at UTS</a>
                </li>
                <li>
                  <a href="#">Social and cultural activities</a>
                </li>
                <li>
                  <a href="#">Sport and recreation</a>
                </li>
                <li>
                  <a href="#">Ways to meet people</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="mega-menu__primary-item is-open">
      <a href="#" class="mega-menu__primary-link">Research and teaching</a>
    </li>
    <li class="mega-menu__primary-item">
      <a href="#" class="mega-menu__primary-link">Partners and community</a>
    </li>
  </ul>
</nav>