Nav
HTML
<nav class="js-nav" 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 Programmes</a>
</li>
</ul>
</nav>
Nav Study Course
HTML
<nav id="nav-study-courses" class="js-nav navSecondary" data-nav-level="2">
<ul class="nav_wrap">
<li>
<a 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-phd">PhD</a>
</li>
<li>
<a class="js-nav_item nav_item" href="#" data-toggle-elem="#nav-lifelong">Lifelong Learning</a>
</li>
</ul>
</nav>
Nav Links University
HTML
<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" href="#">Profile</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Organisation</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Cooperation</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Jobs</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Calls</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Press</a>
</li>
</ul>
</nav>
Nav Links Faculty
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" href="#">Computer Science</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Economics and Management</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Education</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Design and Art</a>
</li>
<li class="navLinks_item">
<a class="js-nav-item" href="#">Science and Technology</a>
</li>
</ul>
</nav>
Nav Grid Bachelor
HTML
<nav id="nav-bachelor" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item">
<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="#">Economics and Social Sciences</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">econ</span>
<div class="gridItem_name">
<a href="#">Tourism, Sport and Event Management</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">comp</span>
<div class="gridItem_name">
<a href="#">Computer Science and Engineering</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Agricultural and Agro-Environmental Sciences</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Industrial and Mechanical Engineering</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">edu</span>
<div class="gridItem_name">
<a href="#">Communication Sciences and Culture</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">edu</span>
<div class="gridItem_name">
<a href="#">Social Education</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">edu</span>
<div class="gridItem_name">
<a href="#">Social Work</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">dsgn</span>
<div class="gridItem_name">
<a href="#">Design and Art</a>
</div>
</li>
<li class="navGrid_item"></li>
</ul>
</nav>
Nav Grid Master
HTML
<nav id="nav-master" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item">
<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="#">Economics and Social Sciences</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">econ</span>
<div class="gridItem_name">
<a href="#">Tourism, Sport and Event Management</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">comp</span>
<div class="gridItem_name">
<a href="#">Computer Science and Engineering</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Agricultural and Agro-Environmental Sciences</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Environmental Management of Mountain Areas</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Energy Engineering</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">International Horticultural Science</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">edu</span>
<div class="gridItem_name">
<a href="#">Primary Education (One Cycle – 5 years)</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">dsgn</span>
<div class="gridItem_name">
<a href="#">Eco-Social Design (Glocal Design)</a>
</div>
</li>
<li class="navGrid_item"></li>
</ul>
</nav>
Nav Grid Phd
HTML
<nav id="nav-phd" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item">
<span class="gridItem_label">comp</span>
<div class="gridItem_name">
<a href="#">Computer Science</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Mountain Environment and Agriculture</a>
</div>
</li>
<li class="navGrid_item">
<span class="gridItem_label">tech</span>
<div class="gridItem_name">
<a href="#">Sustainable Energy and Technologies</a>
</div>
</li>
<li class="navGrid_item">
<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">
<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>
</ul>
</nav>
Nav Grid Lifelong
HTML
<nav id="nav-lifelong" class="js-nav navGrid" data-nav-level="3">
<ul class="nav_wrap navGrid_wrap">
<li class="navGrid_item">
<span class="gridItem_label">Lorem</span>
<div class="gridItem_name">
<a href="#">Lorem ipsum</a>
</div>
</li>
<li class="navGrid_item"></li>
</ul>
</nav>
Nav Mobile
HTML
<nav class="navMobile">
<ul class="navMobile_list">
<li>
<a class="navMobile_item" href="#">University</a>
<ul class="navMobile_second">
<li><a class="navMobile_link" href="#">Profile</a></li>
<li><a class="navMobile_link" href="#">Organisation</a></li>
<li><a class="navMobile_link" href="#">Cooperation</a></li>
<li><a class="navMobile_link" href="#">Jobs</a></li>
<li><a class="navMobile_link" href="#">Calls</a></li>
<li><a class="navMobile_link" href="#">Press</a></li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">Faculties</a>
<ul class="navMobile_second">
<li><a class="navMobile_link" href="#">Computer Science</a></li>
<li><a class="navMobile_link" href="#">Economics and Management</a></li>
<li><a class="navMobile_link" href="#">Education</a></li>
<li><a class="navMobile_link" href="#">Design and Art</a></li>
<li><a class="navMobile_link" href="#">Science and Technology</a></li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">Study Programmes</a>
<ul class="navMobile_second">
<li>
<a class="navMobile_item" href="#">Bachelor</a>
<ul class="navMobile_third">
<li class="navMobile_link">
<span class="navMobile_label">econ</span>
<a href="#">Economics and Management</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">econ</span>
<a href="#">Economics and Social Sciences</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">econ</span>
<a href="#">Tourism, Sport and Event Management</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">comp</span>
<a href="#">Computer Science and Engineering</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Agricultural and Agro-Environmental Sciences</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Industrial and Mechanical Engineering</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">edu</span>
<a href="#">Communication Sciences and Culture</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">edu</span>
<a href="#">Social Education</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">edu</span>
<a href="#">Social Work</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">dsgn</span>
<a href="#">Design and Art</a>
</li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">Master</a>
<ul class="navMobile_third">
<li class="navMobile_link">
<span class="navMobile_label">econ</span>
<a href="#">Economics and Management of the Public Sector</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">econ</span>
<a href="#">Economics and Social Sciences</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">econ</span>
<a href="#">Tourism, Sport and Event Management</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">comp</span>
<a href="#">Computer Science and Engineering</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Agricultural and Agro-Environmental Sciences</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Environmental Management of Mountain Areas</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Energy Engineering</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">International Horticultural Science</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">edu</span>
<a href="#">Primary Education (One Cycle – 5 years)</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">dsgn</span>
<a href="#">Eco-Social Design (Glocal Design)</a>
</li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">PhD</a>
<ul class="navMobile_third">
<li class="navMobile_link">
<span class="navMobile_label">comp</span>
<a href="#">Computer Science</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Mountain Environment and Agriculture</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">tech</span>
<a href="#">Sustainable Energy and Technologies</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">eco</span>
<a href="#">Management and Economics on Organizational and Institutional Outliers</a>
</li>
<li class="navMobile_link">
<span class="navMobile_label">edu</span>
<a href="#">General Pedagogy, Social Pedagogy and General Education</a>
</li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">Lifelong Learning</a>
<ul class="navMobile_third">
<li class="navMobile_link">
<span class="navMobile_label">Lorem</span>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="navMobile_item" href="#">Services</a>
</li>
</ul>
</nav>
Nav Pagination
This pattern contains:
atoms-button-round
HTML
<div class="pagination">
<a href="#" class="btn-round pagination_button"><i class="i i-arrow-left"></i></a> <div class="pagination_pagesWrapper">
<span class="pagination_page pagination_page-current">1</span>
<span class="pagination_page">2</span>
<span class="pagination_page">3</span>
<span class="pagination_page">4</span>
<span class="pagination_page">5</span>
<span class="pagination_page">6</span>
<span class="pagination_page">7</span>
<span class="pagination_page">8</span>
<span class="pagination_page">9</span>
<span class="pagination_page">10</span>
</div>
<a href="#" class="btn-round pagination_button"><i class="i i-arrow-right"></i></a></div>