6.3.1 Example (with toggle) View in a new window

Click the hamburger button to show the mobile menu.

Twig: components/mobile-menu/mobile-menu-complete.twig

Example
Markup
<button class="mobile-menu__toggle" id="mobile-menu-toggle">Show menu</button>

{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'mobile-menu-toggle', label: "Main menu"} %}
  {% block content %}
    <nav class="mobile-menu js-mobile-menu" role="navigation" aria-label="Main menu">
      <ul class="mobile-menu__level-1">
        <li>
          <a href="#">Future students</a>
          <ul class="mobile-menu__level-2">
            <li>
              <a href="#">Find a course</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Analytics and Data Science</a>
                </li>
                <li>
                  <a href="#">Business</a>
                </li>
                <li>
                  <a href="#">Communication</a>
                </li>
                <li>
                  <a href="#">Creative Intelligence and Innovation</a>
                </li>
                <li>
                  <a href="#">Design, Architecture and Building</a>
                </li>
                <li>
                  <a href="#">Education</a>
                </li>
                <li>
                  <a href="#">Engineering</a>
                </li>
                <li>
                  <a href="#">Health</a>
                </li>
                <li>
                  <a href="#">Health (GEM)</a>
                </li>
                <li>
                  <a href="#">Information Technology</a>
                </li>
                <li>
                  <a href="#">International Studies</a>
                </li>
                <li>
                  <a href="#">Law</a>
                </li>
                <li>
                  <a href="#">Science</a>
                </li>
                <li>
                  <a href="#">Transdisciplinary Innovation</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Information for</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">High school students</a>
                </li>
                <li>
                  <a href="#">Non-current school leavers</a>
                </li>
                <li>
                  <a href="#">Postgraduate students</a>
                </li>
                <li>
                  <a href="#">Research students</a>
                </li>
                <li>
                  <a href="#">Short course students</a>
                </li>
                <li>
                  <a href="#">Indigenous Australians</a>
                </li>
                <li>
                  <a href="#">Students with special needs</a>
                </li>
                <li>
                  <a href="#">Careers advisers, teachers and principals</a>
                </li>
                <li>
                  <a href="#">International students</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Important info</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Entry schemes and pathways</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Studying at UTS</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Practical learning</a>
                </li>
                <li>
                  <a href="#">Industry connections</a>
                </li>
                <li>
                  <a href="#">Overseas opportunities</a>
                </li>
                <li>
                  <a href="#">Student support</a>
                </li>
                <li>
                  <a href="#">Student life</a>
                </li>
                <li>
                  <a href="#">Living in Sydney</a>
                </li>
                <li>
                  <a href="#">Experience UTS in VR</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Current students</a>
          <ul class="mobile-menu__level-2">
            <li>
              <a href="#">Managing your course</a>
              <ul class="mobile-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="mobile-menu__level-3">
                <li>
                  <a href="#">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="mobile-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="mobile-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>
        </li>
        <li>
          <a href="#" class="is-active">Research and teaching</a>
          <ul class="mobile-menu__level-2">
            <li>
              <a href="#">Our research</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Health</a>
                </li>
                <li>
                  <a href="#">Data Science</a>
                </li>
                <li>
                  <a href="#">Sustainability</a>
                </li>
                <li>
                  <a href="#">Future work and industry</a>
                </li>
                <li>
                  <a href="#">Social futures</a>
                </li>
                <li>
                  <a href="#">UTS research centres</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Teaching and learning</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Learning futures</a>
                </li>
                <li>
                  <a href="#">UTS model of learning</a>
                </li>
                <li>
                  <a href="#">Iniatives and projects</a>
                </li>
                <li>
                  <a href="#">Learning and teaching grants</a>
                </li>
                <li>
                  <a href="#">Awards and citations</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Future researchers</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Research degrees at UTS</a>
                </li>
                <li>
                  <a href="#">Future research staff</a>
                </li>
                <li>
                  <a href="#">Applying to UTS</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Industry partnerships</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Ways to engage</a>
                </li>
                <li>
                  <a href="#">Working with us</a>
                </li>
                <li>
                  <a href="#">IP and commercialisation</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Partners and community</a>
          <ul class="mobile-menu__level-2">
            <li>
              <a href="#">Initiatives</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">UTS Equal Futures</a>
                </li>
                <li>
                  <a href="#">UTS Innovation &amp; Creative Intelligence Unit</a>
                </li>
                <li>
                  <a href="#">Data Arena</a>
                </li>
                <li>
                  <a href="#">Social justice at UTS</a>
                </li>
                <li>
                  <a href="#">UTS Sustainability</a>
                </li>
                <li>
                  <a href="#">Indigenous Education and Employment</a>
                </li>
                <li>
                  <a href="#">UTS Shopfront Community Program</a>
                </li>
                <li>
                  <a href="#">Student voice in university decision making</a>
                </li>
                <li>
                  <a href="#">Internationalisation</a>
                </li>
                <li>
                  <a href="#">UTS: Art Gallery and Collection</a>
                </li>
                <li>
                  <a href="#">City Campus Master Plan</a>
                </li>
                <li>
                  <a href="#">Australia Piano Quartet</a>
                </li>
                <li>
                  <a href="#">After da Vinci</a>
                </li>
                <li>
                  <a href="#">UTS Sustainability</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Working with UTS</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Partner with us</a>
                </li>
                <li>
                  <a href="#">Recruit our best and brightest</a>
                </li>
                <li>
                  <a href="#">Develop your staff</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Venues and facilities</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">Our venues</a>
                </li>
                <li>
                  <a href="#">Booking and using venues</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Conferences and seminars</a>
              <ul class="mobile-menu__level-3">
                <li>
                  <a href="#">InSPiRE</a>
                </li>
                <li>
                  <a href="#">Research Applications in Information and Library Studies (RAILS) Conference</a>
                </li>
                <li>
                  <a href="#">Documents Unbounded</a>
                </li>
                <li>
                  <a href="#">UTSpeaks</a>
                </li>
                <li>
                  <a href="#">UTS Science in focus</a>
                </li>
                <li>
                  <a href="#">Zunz lecture series</a>
                </li>
                <li>
                  <a href="#">UTSpotlight Events</a>
                </li>
                <li>
                  <a href="#">ASERA Conference</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  {% endblock %}
{% endembed %}