Role navigation

Top level navigation with links to role-specific information.


  • Staff (link)
  • Current students (link)


Sits at the top of the page above the global navigation.

Implementation notes

At the mobile breakpoint range (0 - 641px) the role navigation is removed from the top of the page and appended to the bottom of the global navigation.

<!-- GLOBAL COMPONENT: Role navigation -->
<nav class="role-nav hide-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>
<!-- End global component: Role navigation -->
  • Handle: @role-navigation
  • Preview:
  • Filesystem Path: components/global-components/role-navigation/role-navigation.hbs