Top level navigation with links to the main sections of the site. This component also includes the main site search.
Sits at the top of the page
Add .active-nav to the list item to highlight the active navigation element
At the mobile breakpoint range (0 - 641px) Role navigation in the University Header is appended to the bottom of the global navigation menu.
<!-- GLOBAL COMPONENT: University navigation bar -->
<div class="university-nav-bar">
<div class="row column">
<div class="university-nav-bar-flex">
<div class="brand">
<a href="/" class="logo">University of Bath</a>
</div>
<nav class="university-nav">
<input class="university-nav-checkbox" id="university-nav-checkbox" type="checkbox" aria-labelledby="university-nav-label">
<label for="university-nav-checkbox" class="university-nav-label" id="university-nav-label" aria-haspopup="true">Open menu</label>
<div class="university-nav-tray">
<ul aria-label="Site navigation">
<li><a href="https://www.bath.ac.uk/courses/">Courses</a></li>
<li><a href="https://www.bath.ac.uk/topics/research/">Research</a></li>
<li><a href="https://www.bath.ac.uk/topics/enterprise-and-entrepreneurship/">Enterprise</a></li>
<li><a href="https://www.bath.ac.uk/departments/">Departments</a></li>
<li><a href="https://www.bath.ac.uk/topics/about-the-University/">About</a></li>
</ul>
<nav class="role-nav">
<ul aria-label="Role navigation">
<li><a href="https://www.bath.ac.uk/staff/">Staff</a></li>
<li><a href="https://www.bath.ac.uk/students/">Students</a></li>
<li><a href="https://www.bath.ac.uk/routing/new-students/">New students</a></li>
<li><a href="https://www.bath.ac.uk/professional-services/development-alumni-relations/">Alumni</a></li>
</ul>
</nav>
</div>
</nav>
<div class="university-search">
<input class="university-search-checkbox" id="university-search-checkbox" type="checkbox" aria-labelledby="university-search-label">
<label for="university-search-checkbox" class="university-search-label" id="university-search-label">Open search</label>
<div class="university-search-tray">
<form class="university-search-form" method="get" action="https://www.bath.ac.uk/search">
<input class="search-field" name="query" placeholder="Search bath.ac.uk" title="Type search term here" type="text">
<input name="collection" value="website" type="hidden">
<input class="search-button" value="Search" type="submit" aria-label="Search bath.ac.uk">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- End global component: University navigation bar -->