6.2.1 Working example View in a new window
A testable version of the menu, as it appears in the full site.
Twig: components/mega-menu/mega-menu-complete.twig
Example
Markup
<nav class="mega-menu js-mega-menu" role="navigation" aria-label="Main navigation">
<ul block="block-mainnavigation" class="mega-menu__level-1">
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Future students</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li class="mega-menu--two-thirds">
<a href="#">Find a course</a>
<ul class="mega-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 class="mega-menu--one-third">
<a href="#">Information for</a>
<ul class="mega-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>
</ul>
</div>
</div>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Current students</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<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="#">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">
<a href="#" class="mega-menu__primary-link">Research and teaching</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li>
<a href="#">Our research</a>
<ul class="mega-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="#">Research centres</a>
</li>
</ul>
</li>
<li>
<a href="#">Teaching and learning</a>
<ul class="mega-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="mega-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="mega-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>
</div>
</div>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Partners and community</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li class="mega-menu--one-third">
<a href="#">Working with UTS</a>
<ul class="mega-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 class="mega-menu--one-third">
<a href="#">Community</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Alumni</a>
</li>
<li>
<a href="">Donors</a>
</li>
<li>
<a href="#">Art gallery</a>
</li>
<li>
<a href="#">Shopfront</a>
</li>
<li>
<a href="#">Venues and facilities</a>
</li>
<li>
<a href="#">Conferences and seminars</a>
</li>
</ul>
</li>
<li class="mega-menu--one-third">
<a href="#">Initiatives</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Campus master plan</a>
</li>
<li>
<a href="#">Social justice</a>
</li>
<li>
<a href="#">Data arena</a>
</li>
<li>
<a href="#">Internationalisation</a>
</li>
<li>
<a href="#">Indigenous education and employment</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>