Primary Nav De
HTML
<nav class="js-nav navMain" data-nav-level="1">
<ul class="nav_wrap">
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-university">Universität</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-faculties">Fakultäten</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-study-courses">Studiengänge</a>
</li>
</ul>
</nav>
Primary Nav En
HTML
<nav class="js-nav navMain" data-nav-level="1">
<ul class="nav_wrap">
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-university">University</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-faculties">Faculties</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-study-courses">Study courses</a>
</li>
</ul>
</nav>
Primary Nav It
HTML
<nav class="js-nav navMain" data-nav-level="1">
<ul class="nav_wrap">
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-university">Università</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-faculties">Facoltà</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-study-courses">Corsi di studio</a>
</li>
</ul>
</nav>
Secondary Nav De
HTML
<nav id="nav-study-courses" class="js-nav navSecondary" data-nav-level="2">
<ul class="nav_wrap">
<li>
<a id="bachelor" class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-bachelor">Bachelor</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master">Master</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master-one-cycle">Master (einstufig)</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-phd">Doktoratsstudien</a>
</li>
</ul>
</nav>
Secondary Nav En
HTML
<nav id="nav-study-courses" class="js-nav navSecondary" data-nav-level="2">
<ul class="nav_wrap">
<li>
<a id="bachelor" class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-bachelor">Bachelor</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master">Master</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master-one-cycle">Master (one cycle)</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-phd">PhD</a>
</li>
</ul>
</nav>
Secondary Nav It
HTML
<nav id="nav-study-courses" class="js-nav navSecondary" data-nav-level="2">
<ul class="nav_wrap">
<li>
<a id="bachelor" class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-bachelor">Laurea</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master">Laurea magistrale</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-master-one-cycle">Laurea magistrale ciclo unico</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-phd">Dottorati</a>
</li>
</ul>
</nav>
Nav Breadcrumbs
HTML
<ul class="breadcrumbs">
<li class="breadcrumbs_item"><a href="#">Grandparent</a></li>
<li class="breadcrumbs_item"><a href="#">Parent</a></li>
<li class="breadcrumbs_item"><a href="#">Child</a></li>
<li class="breadcrumbs_item"><a href="#">Grandchild</a></li>
<li class="breadcrumbs_item"><a href="#">Great-Grandchild</a></li>
</ul>
Nav Links De
HTML
<nav id="nav-faculties" class="js-nav navLinks" data-nav-level="2">
<ul class="nav_wrap navLinks_wrap">
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Informatik</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Wirtschaftswissenschaften</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Bildungswissenschaften</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Design und Künste</a></li>
<li class="navLinks_item"><a class="js-nav-item" href="../../patterns/04-pages-01-faculty-natech/04-pages-01-faculty-natech.html">Naturwissenschaften und Technik</a></li>
</ul>
</nav>
<nav id="nav-university" class="js-nav navLinks " data-nav-level="2">
<ul class="nav_wrap navLinks_wrap">
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Profil</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Organisation</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Kooperationen</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Jobs</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Ausschreibungen</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Press</a></li>
</ul>
</nav>
Nav Links En
HTML
<nav id="nav-faculties" class="js-nav navLinks" data-nav-level="2">
<ul class="nav_wrap navLinks_wrap">
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Computer Science</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Economics and management</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Education</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Design and Art</a></li>
<li class="navLinks_item"><a class="js-nav-item" href="../../patterns/04-pages-01-faculty-natech/04-pages-01-faculty-natech.html">Science and Technology</a></li>
</ul>
</nav>
<nav id="nav-university" class="js-nav navLinks " data-nav-level="2">
<ul class="nav_wrap navLinks_wrap">
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Profile</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Organisation</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Cooperation</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Carrers</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Calls</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Press office</a></li>
</ul>
</nav>
Nav Links It
HTML
<nav id="nav-faculties" class="js-nav navLinks" data-nav-level="2">
<ul class="nav_wrap navLinks_wrap">
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Scienze e Tecnologie informatiche</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Economia</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Scienze della Formazione</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Design e Arti</a></li>
<li class="navLinks_item"><a class="js-nav-item" href="../../patterns/04-pages-01-faculty-natech/04-pages-01-faculty-natech.html">Scienze e Tecnologie</a></li>
</ul>
</nav>
<nav id="nav-university" class="js-nav navLinks " data-nav-level="2">
<ul class="nav_wrap navLinks_wrap">
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Profilo</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Organizzazione</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Cooperazione</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Offerte lavorative</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Bandi e concorsi</a></li>
<li class="navLinks_item"><a class="js-nav-item is-inactive" href="#">Ufficio stampa</a></li>
</ul>
</nav>
Nav Grid De
HTML
<nav id="nav-bachelor" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="#">Wirtschaftswissenschaften und Betriebsführung</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-02-bachelor-ppe/04-pages-02-bachelor-ppe.html">Ökonomie und Sozialwissenschaften</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-02-bachelor-tourism/04-pages-02-bachelor-tourism.html">Tourismus-, Sport- und Eventmanagement</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Informatik und Informatik-Ingenieurwesen</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Agrarwissenschaften und Umweltmanagement</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Industrie- und Maschineningenieurwesen</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Kommunikations- und Kulturwissenschaften</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Sozialarbeit</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Sozialpädagogik</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">DSGN</span>
<div class="gridItem_name">
<a href="#">Design und Künste</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-master" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="#">Ökonomie und Management des öffentlichen Sektors</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-03-master-entrepr/04-pages-03-master-entrepr.html">Unternehmensführung und Innovation</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Informatik</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">European Master's Program in Computational Logic (EMCL)</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-03-master-emma/04-pages-03-master-emma.html">Umweltmanagement in Bergregionen</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Energy Engineering</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">International Horticultural Science</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Innovation in Forschung und Praxis Sozialer Arbeit</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">DSGN</span>
<div class="gridItem_name">
<a href="#">Ökosoziales Design (Glocal Design)</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-master-one-cycle" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Bildungswissenschaften für den Primarbereich</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-phd" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Informatik</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Mountain Environment and Agriculture</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Sustainable Energy and Technologies</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECO</span>
<div class="gridItem_name">
<a href="#">Management and Economics on Organizational and Institutional Outliers</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Allgemeine Pädagogik, Sozialpädagogik und Allgemeine Didaktik</a>
</div>
</li>
<li class="navGrid_item"></li>
<li class="navGrid_item"></li>
</ul>
</nav>
Nav Grid En
HTML
<nav id="nav-bachelor" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="#">Economics and Management</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-02-bachelor-ppe/04-pages-02-bachelor-ppe.html">Economics and Social Sciences</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-02-bachelor-tourism/04-pages-02-bachelor-tourism.html">Tourism, Sport and Event Management</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Computer Science and Engineering</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Agricultural and Agro-Environmental Sciences</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Industrial and Mechanical Engineering</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Communication Sciences and Culture</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Social Education</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Social Work</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">DSGN</span>
<div class="gridItem_name">
<a href="#">Design and Art</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-master" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="#">Economics and Management of the Public Sector</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-03-master-entrepr/04-pages-03-master-entrepr.html">Entrepreneurship and Innovation</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Computer Science</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">European Master's Program in Computational Logic</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Innovation and Research for Social Work and Social Education</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-03-master-emma/04-pages-03-master-emma.html">Environmental Management of Mountain Areas</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Energy Engineering</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">International Horticultural Science</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">DSGN</span>
<div class="gridItem_name">
<a href="#">Eco-Social Design (Glocal Design)</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-master-one-cycle" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Primary Education</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-phd" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Computer Science</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Mountain Environment and Agriculture</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Sustainable Energy and Technologies</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECO</span>
<div class="gridItem_name">
<a href="#">Management and Economics on Organizational and Institutional Outliers</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">General Pedagogy, Social Pedagogy and General Education</a>
</div>
</li>
<li class="navGrid_item"></li>
<li class="navGrid_item"></li>
</ul>
</nav>
Nav Grid It
HTML
<nav id="nav-bachelor" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="#">Economics and Management</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-02-bachelor-ppe/04-pages-02-bachelor-ppe.html">Scienze Economiche e Sociali</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-02-bachelor-tourism/04-pages-02-bachelor-tourism.html">Management del Turismo, dello Sport e degli Eventi</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Scienze e Ingegneria dell'Informazione</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Ingegneria Industriale Meccanica</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Scienze Agrarie e Agroambientali</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Educatore sociale</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Scienze della Comunicazione e Cultura</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Servizio sociale</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">DSGN</span>
<div class="gridItem_name">
<a href="#">Design e Arti</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-master" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="#">Economia e Management del Settore Pubblico</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">ECON</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-03-master-entrepr/04-pages-03-master-entrepr.html">Imprenditorialità e Innovazione</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Informatica</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">European Master's Program in Computational Logic</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Innovazione e Ricerca per gli Interventi socio-assistenziali-educativi</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="../../patterns/04-pages-03-master-emma/04-pages-03-master-emma.html">Gestione sostenibile dell’ambiente montano</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Energy Engineering</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">International Horticultural Science</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">DSGN</span>
<div class="gridItem_name">
<a href="#">Design eco-sociale (Glocal Design)</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-master-one-cycle" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Scienze della Formazione primaria</a>
</div>
</li>
</ul>
</nav>
<nav id="nav-phd" class="js-nav navGrid " data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item is-inactive">
<span class="gridItem_label">COMP</span>
<div class="gridItem_name">
<a href="#">Informatica</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Mountain Environment and Agriculture</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">TECH</span>
<div class="gridItem_name">
<a href="#">Sustainable Energy and Technologies</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">ECO</span>
<div class="gridItem_name">
<a href="#">Management and Economics on Organizational and Institutional Outliers</a>
</div>
</li>
<li class="navGrid_item is-inactive">
<span class="gridItem_label">EDU</span>
<div class="gridItem_name">
<a href="#">Pedagogia generale, Pedagogia sociale e Didattica generale</a>
</div>
</li>
<li class="navGrid_item"></li>
<li class="navGrid_item"></li>
</ul>
</nav>
Nav Mobile
HTML
<nav id="nav-mobile" class="navMobile">
<ul class="navMobile_wrap">
<li>
<a class="navMobile_item" href="#">University</a>
</li>
<li>
<a class="navMobile_item" href="#nav-mobile-second">Faculties</a>
<ul class="navMobile_second">
<li><a class="navMobile_item navMobile_link" href="#">Economics and Managment</a></li>
<li><a class="navMobile_item navMobile_link" href="#">Computer Science</a></li>
<li><a class="navMobile_item navMobile_link" href="#">Science and Technology</a></li>
<li><a class="navMobile_item navMobile_link" href="#">Education</a></li>
<li><a class="navMobile_item navMobile_link" href="#">Design and Art</a></li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#nav-mobile-second">Study Courses</a>
<ul id="nav-mobile-second" class="navMobile_second">
<li>
<a class="navMobile_item" href="#nav-mobile-third">Bachelor</a>
<ul id="nav-mobile-third" class="navMobile_third">
<li class="mobileItem_wrap">
<span class="mobileItem_label">ECON</span>
<div class="mobileItem_name">
<a href="#">Economics and Management</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">ECON</span>
<div class="mobileItem_name">
<a href="#">Economics and Social Sciences</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">ECON</span>
<div class="mobileItem_name">
<a href="#">Tourism, Sport and Event Management</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">COMP</span>
<div class="mobileItem_name">
<a href="#">Computer Science and Engineering</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">TECH</span>
<div class="mobileItem_name">
<a href="#">Agricultural and Agro-Environmental Sciences</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">TECH</span>
<div class="mobileItem_name">
<a href="#">Industrial and Mechanical Engineering</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">EDU</span>
<div class="mobileItem_name">
<a href="#">Communication Sciences and Culture</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">EDU</span>
<div class="mobileItem_name">
<a href="#">Social Education</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">EDU</span>
<div class="mobileItem_name">
<a href="#">Social Work</a>
</div>
</li>
<li class="mobileItem_wrap">
<span class="mobileItem_label">DSGN</span>
<div class="mobileItem_name">
<a href="#">Design and Art</a>
</div>
</li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">Master</a>
</li>
<li>
<a class="navMobile_item" href="#">Master (one cycle)</a>
</li>
<li>
<a class="navMobile_item" href="#">PhD</a>
</li>
<li>
<a class="navMobile_item navMobile_link" href="#">Further offer</a>
</li>
</ul>
</li>
<li>
<a class="navMobile_item navMobile_link" href="#">Services</a>
</li>
</ul>
</nav>
Scroll Nav
HTML
<nav class="scrollNav">
<div class="scrollNav-inner">
<span class="scrollNav_item ">Nav Item</span>
<span class="scrollNav_item ">Nav Item</span>
<span class="scrollNav_item ">Nav Item</span>
<span class="scrollNav_item ">Nav Item</span>
<span class="scrollNav_item ">Nav Item</span>
<span class="scrollNav_item ">Nav Item</span>
</div>
</nav>
Scroll Nav Alphabet
HTML
<nav class="scrollNav">
<div class="scrollNav-inner">
<span class="scrollNav_item ">A</span>
<span class="scrollNav_item ">B</span>
<span class="scrollNav_item ">C</span>
<span class="scrollNav_item ">D</span>
<span class="scrollNav_item ">E</span>
<span class="scrollNav_item ">F</span>
<span class="scrollNav_item ">G</span>
<span class="scrollNav_item ">H</span>
<span class="scrollNav_item ">I</span>
<span class="scrollNav_item ">J</span>
<span class="scrollNav_item ">K</span>
<span class="scrollNav_item ">L</span>
<span class="scrollNav_item ">M</span>
<span class="scrollNav_item ">N</span>
<span class="scrollNav_item ">O</span>
<span class="scrollNav_item ">P</span>
<span class="scrollNav_item ">Q</span>
<span class="scrollNav_item ">R</span>
<span class="scrollNav_item ">S</span>
<span class="scrollNav_item ">T</span>
<span class="scrollNav_item ">U</span>
<span class="scrollNav_item ">V</span>
<span class="scrollNav_item ">W</span>
<span class="scrollNav_item ">Z</span>
<span class="scrollNav_item ">Y</span>
<span class="scrollNav_item ">Z</span>
</div>
</nav>
Scroll Nav Months
HTML
<nav class="scrollNav">
<div class="scrollNav-inner">
<span class="scrollNav_item ">January</span>
<span class="scrollNav_item ">February</span>
<span class="scrollNav_item ">March</span>
<span class="scrollNav_item ">April</span>
<span class="scrollNav_item ">May</span>
<span class="scrollNav_item ">June</span>
<span class="scrollNav_item ">July</span>
<span class="scrollNav_item ">August</span>
<span class="scrollNav_item ">September</span>
<span class="scrollNav_item ">October</span>
<span class="scrollNav_item ">November</span>
<span class="scrollNav_item ">Dicember</span>
</div>
</nav>