Header
<section class="ob-new-header">
<div class="header-spacer">
<div class="header-skip-content"> <a class="header-skip-content-link" href="#content">Skip to main content</a> </div>
<header aria-label="Header" class="new__header" id="js-header">
<div class="container is-fullhd">
<a href="#" class="header-logo">
<img class="header-screen-logo" src="https://www.brookes.ac.uk/app/build/assets/images/brookeslogo.svg" alt="Oxford Brookes University"> <img class="header-print-logo" src="https://www.brookes.ac.uk/FrontendResources/img/logo-print.png" alt="Oxford Brookes University">
</a>
<ul class="new__nav-shortcut-links m-bottom-0">
<!--is-hidden-touch-->
<li> <a class="nav-menu btn" href="#"> <span>Menu</span> <i class="fas fa-bars"></i> </a> </li>
<li>
<div class="nav-search-container">
<a class="nav-search pop-mobile is-unselectable is-hidden-desktop" aria-expanded="false">
<span>Search</span>
<span class="nav-search-icon fa fa-search" aria-hidden="true"></span>
</a>
<a class="nav-search pop-desktop is-unselectable is-hidden-touch" aria-expanded="false">
<span>Search</span>
<span class="nav-search-icon fa fa-search" aria-hidden="true"></span>
</a>
<div class="nav-search-box-container show-desktop is-hidden-touch is-hidden">
<h2 class="is-size-3 font-type-2"> Search the Brookes website </h2>
<div class="nav-search-box">
<label for="nav-search-input" class="is-sr-only"> Search </label>
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-1" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-1" data-search-url="https://search.brookes.ac.uk/s/search.html?collection=oxford-brookes-search" data-suggest-url="https://search.brookes.ac.uk/s/suggest.json" class="nav-search-input" id="nav-search-input" placeholder="Search" value="">
<div id="react-autowhatever-1" role="listbox" class="react-autosuggest__suggestions-container"></div>
</div>
<div class="nav-search-submit-wrapper">
<label for="nav-search-submit" class="is-sr-only"> Search </label>
<input id="nav-search-submit" type="submit" class="nav-search-submit">
<span class="nav-search-submit-icon fa fa-search" aria-hidden="true"></span> </div>
</div>
</div>
</div>
</li>
</ul>
<nav class="show-mobile is-hidden-desktop is-hidden" aria-label="Primary Navigation" role="navigation" aria-expanded="true">
<ul class="nav-list is-marginless nav-open">
<li>
<div class="nav-search-mobile">
<div class="nav-search-box">
<label for="nav-search-input" class="is-sr-only">Search</label>
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-2" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-2" data-search-url="https://search.brookes.ac.uk/s/search.html?collection=oxford-brookes-search" data-suggest-url="https://search.brookes.ac.uk/s/suggest.json" class="nav-search-input" id="nav-search-input2" placeholder="Search" value="">
<div id="react-autowhatever-2" role="listbox" class="react-autosuggest__suggestions-container"></div>
</div>
<div class="nav-search-submit-wrapper">
<label for="nav-search-submit2" class="is-sr-only"> Search </label>
<input id="nav-search-submit2" type="submit" class="nav-search-submit">
<span class="nav-search-submit-icon fa fa-search" aria-hidden="true"></span>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="site-nav">
<div class="site-nav-header off-canvas">
<div class="site-logo">
<a class="site-nav-logo" href="#">
<img src="https://www.brookes.ac.uk/app/build/assets/images/brookeslogo.svg" alt="Oxford Brookes University">
</a>
</div>
<div class="site-nav-menu">
<p class="has-text-right"> <a class="button btn" href="#"> <span class="icon"><i class="fa fa-times fa-w-11"></i></span> <span>Close</span> </a> </p>
<ul class="has-text-right list-inline">
<li><a href="#" class="">Current students</a></li>
<li><a href="#" class="m-left-10">Staff</a></li>
<li><a href="#" class="m-left-10">Alumni</a></li>
</ul>
</div>
</div>
<aside>
<ul class="menu-list navigation-menu">
<li class="has-children"><a class="parent-link" href="#">Study here <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Study here</strong></a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact and meet us</a></li>
<li><a href="#">Why Oxford Brookes?</a></li>
<li><a href="#">Student life</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Schools and colleges</a></li>
<li><a href="#">Parents and carers</a></li>
<li><a href="#">Fees and finance</a></li>
<li><a href="#">Brexit information</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">International <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>International</strong></a></li>
<li><a href="#">International courses</a></li>
<li><a href="#">Study abroad and exchanges</a></li>
<li><a href="#">Why international students choose Oxford Brookes</a></li>
<li><a href="#">Meet our students</a></li>
<li><a href="#">Apply for a course</a></li>
<li><a href="#">Your country</a></li>
<li><a href="#">Applying to arriving</a></li>
<li><a href="#">Fees and funding</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">About <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>About</strong></a></li>
<li><a href="#">Brookes at a glance</a></li>
<li><a href="#">Faculties and departments</a></li>
<li><a href="#">Professional services</a></li>
<li><a href="#">Structure and governance</a></li>
<li><a href="#">Strategy</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Our history</a></li>
<li><a href="#">Our community</a></li>
<li><a href="#">Social responsibility</a></li>
<li><a href="#">Sustainability</a></li>
<li><a href="#">Corporate identity</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">Research <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Research</strong></a></li>
<li><a href="#">REF 2021</a></li>
<li><a href="#">Research news</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Research degrees</a></li>
<li><a href="#">Research in the Faculties</a></li>
<li><a href="#">Job vacancies</a></li>
<li><a href="#">RADAR research repository</a></li>
<li><a href="#">Research integrity statement</a></li>
<li><a href="#">Research ethics (staff and students only)</a></li>
<li><a href="#">Support (staff only)</a></li>
<li><a href="#">Policies and codes of practice (staff and students only)</a></li>
<li><a href="#">Knowledge exchange (staff and students only)</a></li>
<li><a href="#">Converis (CRIS) (staff and students only)</a></li>
<li><a href="#">Research impact (staff and students only)</a></li>
<li><a href="#">Library services for researchers</a></li>
<li><a href="#">Contact the Research team</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">Business and Employers <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Business and Employers</strong></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Collaboration with business</a></li>
<li><a href="#">Services to business</a></li>
<li><a href="#">Continuing professional development</a></li>
<li><a href="#">Access to talent</a></li>
<li><a href="#">Enterprise support</a></li>
<li><a href="#">Case studies</a></li>
<li><a href="#">Apprenticeships</a></li>
<li><a href="#">Oxford Brookes Venues</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Staff support</a></li>
<li><a href="#">Contact the Business and Employers team</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">Support us <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Support us</strong></a></li>
<li><a href="#">Transforming lives</a></li>
<li><a href="#">Finding solutions</a></li>
<li><a href="#">Inspiring students</a></li>
<li><a href="#">Brookes Alumni Fund</a></li>
<li><a href="#">Support us news</a></li>
<li><a href="#">Donate now</a></li>
<li><a href="#">Get involved</a></li>
<li><a href="#">Contact us and meet the team</a></li>
<li><a href="#">Planning a gift in your Will</a></li>
</ul>
</li>
</ul>
</aside>
</div>
</section><section class="ob-new-header">
<div class="header-spacer">
<div class="header-skip-content"> <a class="header-skip-content-link" href="#content">Skip to main content</a> </div>
<header aria-label="Header" class="new__header" id="js-header">
<div class="container is-fullhd">
<a href="#" class="header-logo">
<img class="header-screen-logo" src="https://www.brookes.ac.uk/app/build/assets/images/brookeslogo.svg" alt="Oxford Brookes University">
<img class="header-screen-logo dept-logo" src="/design-system/templates/html/img/department-logo.png" alt="Department / Partner logo">
<img class="header-print-logo" src="https://www.brookes.ac.uk/FrontendResources/img/logo-print.png" alt="Oxford Brookes University">
</a>
<ul class="new__nav-shortcut-links m-bottom-0">
<!--is-hidden-touch-->
<li> <a class="nav-menu btn" href="#"> <span>Menu</span> <i class="fas fa-bars"></i> </a> </li>
<li>
<div class="nav-search-container">
<a class="nav-search pop-mobile is-unselectable is-hidden-desktop" aria-expanded="false">
<span>Search</span>
<span class="nav-search-icon fa fa-search" aria-hidden="true"></span>
</a>
<a class="nav-search pop-desktop is-unselectable is-hidden-touch" aria-expanded="false">
<span>Search</span>
<span class="nav-search-icon fa fa-search" aria-hidden="true"></span>
</a>
<div class="nav-search-box-container show-desktop is-hidden-touch is-hidden">
<h2 class="is-size-3 font-type-2"> Search the Brookes website </h2>
<div class="nav-search-box">
<label for="nav-search-input" class="is-sr-only"> Search </label>
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-1" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-1" data-search-url="https://search.brookes.ac.uk/s/search.html?collection=oxford-brookes-search" data-suggest-url="https://search.brookes.ac.uk/s/suggest.json" class="nav-search-input" id="nav-search-input" placeholder="Search" value="">
<div id="react-autowhatever-1" role="listbox" class="react-autosuggest__suggestions-container"></div>
</div>
<div class="nav-search-submit-wrapper">
<label for="nav-search-submit" class="is-sr-only"> Search </label>
<input id="nav-search-submit" type="submit" class="nav-search-submit">
<span class="nav-search-submit-icon fa fa-search" aria-hidden="true"></span> </div>
</div>
</div>
</div>
</li>
</ul>
<nav class="show-mobile is-hidden-desktop is-hidden" aria-label="Primary Navigation" role="navigation" aria-expanded="true">
<ul class="nav-list is-marginless nav-open">
<li>
<div class="nav-search-mobile">
<div class="nav-search-box">
<label for="nav-search-input" class="is-sr-only">Search</label>
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-2" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-2" data-search-url="https://search.brookes.ac.uk/s/search.html?collection=oxford-brookes-search" data-suggest-url="https://search.brookes.ac.uk/s/suggest.json" class="nav-search-input" id="nav-search-input2" placeholder="Search" value="">
<div id="react-autowhatever-2" role="listbox" class="react-autosuggest__suggestions-container"></div>
</div>
<div class="nav-search-submit-wrapper">
<label for="nav-search-submit2" class="is-sr-only"> Search </label>
<input id="nav-search-submit2" type="submit" class="nav-search-submit">
<span class="nav-search-submit-icon fa fa-search" aria-hidden="true"></span>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="site-nav">
<div class="site-nav-header off-canvas">
<div class="site-logo">
<a class="site-nav-logo" href="#">
<img src="https://www.brookes.ac.uk/app/build/assets/images/brookeslogo.svg" alt="Oxford Brookes University">
</a>
</div>
<div class="site-nav-menu">
<p class="has-text-right"> <a class="button btn" href="#"> <span class="icon"><i class="fa fa-times fa-w-11"></i></span> <span>Close</span> </a> </p>
<ul class="has-text-right list-inline">
<li><a href="#" class="">Current students</a></li>
<li><a href="#" class="m-left-10">Staff</a></li>
<li><a href="#" class="m-left-10">Alumni</a></li>
</ul>
</div>
</div>
<aside>
<ul class="menu-list navigation-menu">
<li class="has-children"><a class="parent-link" href="#">Study here <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Study here</strong></a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact and meet us</a></li>
<li><a href="#">Why Oxford Brookes?</a></li>
<li><a href="#">Student life</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Schools and colleges</a></li>
<li><a href="#">Parents and carers</a></li>
<li><a href="#">Fees and finance</a></li>
<li><a href="#">Brexit information</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">International <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>International</strong></a></li>
<li><a href="#">International courses</a></li>
<li><a href="#">Study abroad and exchanges</a></li>
<li><a href="#">Why international students choose Oxford Brookes</a></li>
<li><a href="#">Meet our students</a></li>
<li><a href="#">Apply for a course</a></li>
<li><a href="#">Your country</a></li>
<li><a href="#">Applying to arriving</a></li>
<li><a href="#">Fees and funding</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">About <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>About</strong></a></li>
<li><a href="#">Brookes at a glance</a></li>
<li><a href="#">Faculties and departments</a></li>
<li><a href="#">Professional services</a></li>
<li><a href="#">Structure and governance</a></li>
<li><a href="#">Strategy</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Our history</a></li>
<li><a href="#">Our community</a></li>
<li><a href="#">Social responsibility</a></li>
<li><a href="#">Sustainability</a></li>
<li><a href="#">Corporate identity</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">Research <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Research</strong></a></li>
<li><a href="#">REF 2021</a></li>
<li><a href="#">Research news</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Research degrees</a></li>
<li><a href="#">Research in the Faculties</a></li>
<li><a href="#">Job vacancies</a></li>
<li><a href="#">RADAR research repository</a></li>
<li><a href="#">Research integrity statement</a></li>
<li><a href="#">Research ethics (staff and students only)</a></li>
<li><a href="#">Support (staff only)</a></li>
<li><a href="#">Policies and codes of practice (staff and students only)</a></li>
<li><a href="#">Knowledge exchange (staff and students only)</a></li>
<li><a href="#">Converis (CRIS) (staff and students only)</a></li>
<li><a href="#">Research impact (staff and students only)</a></li>
<li><a href="#">Library services for researchers</a></li>
<li><a href="#">Contact the Research team</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">Business and Employers <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Business and Employers</strong></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Collaboration with business</a></li>
<li><a href="#">Services to business</a></li>
<li><a href="#">Continuing professional development</a></li>
<li><a href="#">Access to talent</a></li>
<li><a href="#">Enterprise support</a></li>
<li><a href="#">Case studies</a></li>
<li><a href="#">Apprenticeships</a></li>
<li><a href="#">Oxford Brookes Venues</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Staff support</a></li>
<li><a href="#">Contact the Business and Employers team</a></li>
</ul>
</li>
<li class="has-children"><a class="parent-link" href="#">Support us <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="#"><strong>Support us</strong></a></li>
<li><a href="#">Transforming lives</a></li>
<li><a href="#">Finding solutions</a></li>
<li><a href="#">Inspiring students</a></li>
<li><a href="#">Brookes Alumni Fund</a></li>
<li><a href="#">Support us news</a></li>
<li><a href="#">Donate now</a></li>
<li><a href="#">Get involved</a></li>
<li><a href="#">Contact us and meet the team</a></li>
<li><a href="#">Planning a gift in your Will</a></li>
</ul>
</li>
</ul>
</aside>
</div>
</section><section class="ob-new-header">
<div class="header-spacer">
<div class="header-skip-content"> <a class="header-skip-content-link" href="#content">Skip to main content</a> </div>
<header aria-label="Header" class="new__header" id="js-header">
<div class="container is-fullhd">
<a href="#" class="header-logo">
<img class="header-screen-logo" src="https://www.brookes.ac.uk/app/build/assets/images/brookeslogo.svg" alt="Oxford Brookes University">
<img class="header-print-logo" src="https://www.brookes.ac.uk/FrontendResources/img/logo-print.png" alt="Oxford Brookes University">
</a>
</div>
</header>
</div>
</section>The audience menu must not be modified.
The local menu can be modified if used by a faculty or department website.
If possible, keep text in menu items short.
Do not use uppercase text or acronyms.
Ensure there as a navigation heading hidden for sighted users by using sr-only. This will be announced to screen readers.