Components
Header
The header component displays branding, navigation and search.
The header must always be included on every web page.
The background colour must always be white.
The logo must always link to the default home page.
Note The following examples may not work as expected.
Default header
<header id="header" class="navbar navbar-default navbar-fixed-top" role="navigation" aria-label="Header">
<div id="skiptocontent">
<a href="#content">Skip to main content</a>
</div>
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar">
<span class="fa fa-bars" aria-label="Toggle navigation"></span>
</button>
<a class="navbar-brand" href="https://www.brookes.ac.uk/" title="Oxford Brookes University">Oxford Brookes University</a>
<img class="visible-print-block visible-print-inline" src="https://www.brookes.ac.uk/FrontendResources/img/logo-print.png" alt="Oxford Brookes University" />
<nav id="header-navbar" class="collapse navbar-collapse" style="height: auto;" aria-label="Primary Navigation">
<div class="topbar">
<ul class="nav navbar-nav topbar-nav">
<li class="dropdown visible-xs"><a href="/search/" class="dropdown-toggle" data-toggle="dropdown">Site search <span class="fa fa-search" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<div class="form-horizontal">
<label class="sr-only" for="ctl00_ctl00_SiteHeader_txtSearchMob">Search for:</label>
<input name="ctl00$ctl00$SiteHeader$txtSearchMob" type="text" id="ctl00_ctl00_SiteHeader_txtSearchMob" class="form-control metaInput" placeholder="Search" />
<input type="submit" name="ctl00$ctl00$SiteHeader$btnGo1" value="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$SiteHeader$btnGo1", "", false, "", "/templates/pages/searchforwarder.aspx", false, false))" id="ctl00_ctl00_SiteHeader_btnGo1" class="search-button" />
</div>
</div>
</li>
<li><a href="/students/">Students <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
<li><a href="/staff/">Staff <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
<li><a href="https://www.brookesalumni.co.uk/">Alumni <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
<li class="dropdown hidden-xs"><a href="/templates/pages/sitesearchpage.aspx" class="dropdown-toggle" data-toggle="dropdown">Search <span class="fa fa-search"></span></a>
<div class="dropdown-menu">
<div class="form-horizontal">
<label class="sr-only">Search for:</label>
<input name="ctl00$ctl00$SiteHeader$txtSearch" type="text" id="ctl00_ctl00_SiteHeader_txtSearch" class="form-control metaInput" placeholder="Search" />
<input type="submit" name="ctl00$ctl00$SiteHeader$btnGo" value="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$SiteHeader$btnGo", "", false, "", "/templates/pages/searchforwarder.aspx", false, false))" id="ctl00_ctl00_SiteHeader_btnGo" class="search-button" />
</div>
</div>
</li>
</ul>
</div>
<div class="yamm">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Study here <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">Study here <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">International <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">International <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">About <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">About <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Research <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">Research <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Business and Employers <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">Business and Employers <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</header>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.
Department header
Department name
<header id="header" class="navbar navbar-default navbar-fixed-top" role="navigation" aria-label="Header">
<div id="skiptocontent">
<a href="#content">Skip to main content</a>
</div>
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar">
<span class="fa fa-bars" aria-label="Toggle navigation"></span>
</button>
<a class="navbar-brand" href="https://www.brookes.ac.uk/" title="Oxford Brookes University">Oxford Brookes University</a>
<img class="visible-print-block visible-print-inline" src="https://www.brookes.ac.uk/FrontendResources/img/logo-print.png" alt="Oxford Brookes University" />
<nav id="header-navbar" class="collapse navbar-collapse" style="height: auto;" aria-label="Primary Navigation">
<div class="topbar">
<ul class="nav navbar-nav topbar-nav">
<li class="dropdown visible-xs"><a href="/search/" class="dropdown-toggle" data-toggle="dropdown">Site search <span class="fa fa-search" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<div class="form-horizontal">
<label class="sr-only" for="ctl00_ctl00_SiteHeader_txtSearchMob">Search for:</label>
<input name="ctl00$ctl00$SiteHeader$txtSearchMob" type="text" id="ctl00_ctl00_SiteHeader_txtSearchMob" class="form-control metaInput" placeholder="Search" />
<input type="submit" name="ctl00$ctl00$SiteHeader$btnGo1" value="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$SiteHeader$btnGo1", "", false, "", "/templates/pages/searchforwarder.aspx", false, false))" id="ctl00_ctl00_SiteHeader_btnGo1" class="search-button" />
</div>
</div>
</li>
<li><a href="/students/">Students <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
<li><a href="/staff/">Staff <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
<li><a href="https://www.brookesalumni.co.uk/">Alumni <span class="fa fa-angle-right" aria-hidden="true"></span></a></li>
<li class="dropdown hidden-xs"><a href="/templates/pages/sitesearchpage.aspx" class="dropdown-toggle" data-toggle="dropdown">Search <span class="fa fa-search"></span></a>
<div class="dropdown-menu">
<div class="form-horizontal">
<label class="sr-only">Search for:</label>
<input name="ctl00$ctl00$SiteHeader$txtSearch" type="text" id="ctl00_ctl00_SiteHeader_txtSearch" class="form-control metaInput" placeholder="Search" />
<input type="submit" name="ctl00$ctl00$SiteHeader$btnGo" value="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$SiteHeader$btnGo", "", false, "", "/templates/pages/searchforwarder.aspx", false, false))" id="ctl00_ctl00_SiteHeader_btnGo" class="search-button" />
</div>
</div>
</li>
</ul>
</div>
<h2>Department name</h2>
<div class="yamm">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Study here <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">Study here <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">International <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">International <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">About <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">About <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Research <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">Research <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="dropdown yamm-fw"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Business and Employers <span class="fa fa-angle-down" aria-hidden="true"></span></a>
<div class="dropdown-menu">
<ul class="yamm-content yamm-container level0">
<li>
<h3><a href="#">Business and Employers <span class="fa fa-angle-right" aria-hidden="true"></span></a></h3>
<ul class="count-column">
<li><a href="#">Local menu item 1</a></li>
<li><a href="#">Local menu item 2</a></li>
<li><a href="#">Local menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="department visible-xs-block">
<div class="container">
<h2>Department name</h2>
</div>
</div>The department header pattern is similar to the default header with the following differences:
- The audience and local menu items are displayed in a single list, not as columns.
- The department name should be displayed between the audience and local menu on larger devices, then below the header on small devices.
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.
Basic header
<header id="header" class="navbar navbar-default navbar-fixed-top" role="navigation" aria-label="Header">
<div id="skiptocontent">
<a href="#content">Skip to main content</a>
</div>
<div class="container">
<a class="navbar-brand" href="https://www.brookes.ac.uk/" title="Oxford Brookes University">Oxford Brookes University</a>
<img class="visible-print-block visible-print-inline" src="https://www.brookes.ac.uk/FrontendResources/img/logo-print.png" alt="Oxford Brookes University" />
</div>
</header>The basic header is the very simple version of the default / department headers.
This can also contain a search box.
N/A