University nav bar

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


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


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>
            <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="">Courses</a></li>
                        <li><a href="">Research</a></li>
                        <li><a href="">Enterprise</a></li>
                        <li><a href="">Departments</a></li>
                        <li><a href="">About</a></li>
                    <nav class="role-nav">
                        <ul aria-label="Role navigation">
                            <li><a href="">Staff</a></li>
                            <li><a href="">Students</a></li>
                            <li><a href="">New students</a></li>
                            <li><a href="">Alumni</a></li>
            <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="">
                        <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: University navigation bar -->
  • Handle: @university-nav-bar
  • Preview:
  • Filesystem Path: components/ingredients/university-ingredients/university-nav-bar/university-nav-bar.hbs