Header
This is an example and does reflect the current menu on the live website.
<div id="skiptocontent"><a class="skip-link is-size-6" href="#content">Skip to main content</a></div>
<section class="ob-new-header">
<div class="header-spacer">
<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://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/template%20assets/brookeslogo.svg" alt="Oxford Brookes University"> <img class="header-print-logo" src="https://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/logo-print.png" alt="Oxford Brookes University">
</a>
<nav aria-label="Shortcut menu">
<ul class="new__nav-shortcut-links m-bottom-0">
<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" href="#">
<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-11" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-11" 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-11" 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>
<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-input2" class="is-sr-only">Search</label>
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-12" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-12" 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-12" 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://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/template%20assets/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="">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
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li> <a href="/study"><strong>Study</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">Student life
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li> <a href="/student-life"><strong>Student life</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">Research
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li><a href="/research"><strong>Research</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">Engage and innovate
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li><a href="#"><strong>Engage and innovate</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">About
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li><a href="#"><strong>About</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
</ul>
</aside>
</div>
</section>This is an example and does reflect the current menu on the live website.
<div id="skiptocontent"><a class="skip-link is-size-6" href="#content">Skip to main content</a></div>
<section class="ob-new-header">
<div class="header-spacer">
<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://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/template%20assets/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://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/logo-print.png" alt="Oxford Brookes University">
</a>
<nav aria-label="Shortcut menu">
<ul class="new__nav-shortcut-links m-bottom-0">
<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" href="#">
<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-11" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-11" 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-11" 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>
<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-input2" class="is-sr-only">Search</label>
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-12" aria-expanded="false" class="react-autosuggest__container">
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-12" 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-12" 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://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/template%20assets/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="">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
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li> <a href="/study"><strong>Study</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">Student life
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li> <a href="/student-life"><strong>Student life</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">Research
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li><a href="/research"><strong>Research</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">Engage and innovate
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li><a href="#"><strong>Engage and innovate</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
<li class="has-children">
<a class="parent-link" href="#">About
<svg class="svg-inline--fa fa-caret-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>
</a>
<ul>
<li><a href="#"><strong>About</strong></a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
<li><a href="/study/subject-areas">Other page in section</a></li>
</ul>
</li>
</ul>
</aside>
</div>
</section><div id="skiptocontent"><a class="skip-link is-size-6" href="#content">Skip to main content</a></div>
<section class="ob-new-header">
<div class="header-spacer">
<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://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/template%20assets/brookeslogo.svg" alt="Oxford Brookes University"> <img class="header-print-logo" src="https://media-cdn.brookes.ac.uk/mediacontainer/medialibraries/oxfordbrookes/images/logo-print.png" alt="Oxford Brookes University">
</a>
</div>
</header>
</div>
</section>