Global navigation

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

Elements

  • Courses (link)
  • Research (link)
  • Departments (link)
  • About (link)
  • Explore (link)

Position

Sits at the top of the page

Implementation notes

At the mobile breakpoint range (0 - 641px) role navigation is appended to the bottom of the global navigation menu.

<!-- GLOBAL COMPONENT: Global navigation -->
<div class="site-header">
    <div class="row column">
        <div class="site-header-flex">
            <div class="global-brand">
                <a href="/" class="wordmark-inverse">University of Bath</a>
            </div>
            <nav class="global-nav">
                <input class="global-nav-checkbox" id="global-nav-checkbox" type="checkbox" aria-labelledby="global-nav-label">
                <label for="global-nav-checkbox" class="global-nav-label" id="global-nav-label" aria-haspopup="true">Open menu</label>
                <div class="global-nav-tray">
                    <ul aria-label="Global navigation">
                        <li><a href="http://www.bath.ac.uk/collections/courses/">Courses</a></li>
                        <li><a href="http://www.bath.ac.uk/research/">Research</a></li>
                        <li><a href="http://www.bath.ac.uk/topics/collaborate-with-us/">Collaborate</a></li>
                        <li><a href="http://www.bath.ac.uk/departments/">Departments</a></li>
                        <li><a href="http://www.bath.ac.uk/collections/about-the-university/">About</a></li>
                    </ul>
                    <!-- Role navigation -->
                    <nav class="role-nav show-for-small-only">
                        <div class="row column">
                            <div class="role-nav-flex">
                                <ul aria-label="Role navigation">
                                    <li><a href="http://www.bath.ac.uk/staff/">Staff</a></li>
                                    <li><a href="http://www.bath.ac.uk/students/">Students</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div>
            </nav>
            <div class="global-search">
                <input class="global-search-checkbox" id="global-search-checkbox" type="checkbox" aria-labelledby="global-search-label">
                <label for="global-search-checkbox" class="global-search-label" id="global-search-label">Open search</label>
                <div class="global-search-tray">
                    <form class="global-search-form" method="get" action="//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: Global navigation -->
  • Handle: @global-navigation
  • Preview:
  • Filesystem Path: components/global-components/global-navigation/global-navigation.hbs