Global navigation

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


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


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>
            <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="">Courses</a></li>
                        <li><a href="">Research</a></li>
                        <li><a href="">Collaborate</a></li>
                        <li><a href="">Departments</a></li>
                        <li><a href="">About</a></li>
                    <!-- 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="">Staff</a></li>
                                    <li><a href="">Students</a></li>
            <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="//">
                        <input class="search-field" name="query" placeholder="Search" 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">
<!-- End global component: Global navigation -->
  • Handle: @global-navigation
  • Preview:
  • Filesystem Path: components/global-components/global-navigation/global-navigation.hbs