University nav bar

Top level navigation with links to the main sections of the site. This component also includes the main site search.

Elements

  • University navigation
    • Courses (link)
    • Research (link)
    • Departments (link)
    • About (link)
  • Role navigation (on mobile)
    • Staff (link)
    • Students (link)
    • New students (link)
    • Alumni (link)
  • University search

Position

Sits at the top of the page

Implementation notes

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/collaborate-with-us/">Collaborate</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 -->
  • Handle: @university-nav-bar
  • Preview:
  • Filesystem Path: components/university-components/university-nav-bar/university-nav-bar.hbs