The @uol-header-global-masthead provides “global” University of Leeds identification, “quicklinks” and search. The global masthead must be present on all University of Leeds websites that use this design system.
The University of Leeds logo must always link to the main University of Leeds homepage.
The “quicklinks” contents should match that of the main University of Leeds website. You should not alter or add additional links to those found on the main University of Leeds website. This helps to provide consistency of user experience as site visitors move between and return to any University of Leeds site that uses the Design System.
Use this component on every University of Leeds website that makes use of the Design System.
This component should not be used on any site that is not on a leeds.ac.uk domain or subdomain.
Ensure that the home_label and home_url are not user editable and are always set to:
{
"home_label": "University of Leeds homepage",
"home_url": "https://leeds.ac.uk"
}See separate notes for implementation of:
<div class="uol-global-masthead uol-content-container">
<div class="uol-global-masthead__inner">
{% include '@uol-skip-link' %}
<a class="uol-global-masthead__home" href="{{ home_url }}" {% if current %}aria-current="page"{% endif %}>
{% render '@uol-logo-uol-inline' %}
<span class="hide-accessible">{{ home_label }}</span>
</a>
</div>
{% render '@uol-header-global-quicklinks', { quicklinks: global_quicklinks } %}
{% render '@uol-header-global-search', { search: global_search } %}
</div>
<div class="uol-global-masthead uol-content-container">
<div class="uol-global-masthead__inner">
<a class="uol-skip-link" href="#main">Skip to main content</a>
<a class="uol-global-masthead__home" href="https://leeds.ac.uk">
<svg class="uol-logo--inline" version="1.1" id="Online" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1923 261.2" style="enable-background:new 0 0 1923 261.2;" xml:space="preserve">
<style type="text/css">
</style>
<g id="Online_00000020373721803601593220000010652832729662727574_">
<path class="st0 uol-logo--inline__text" d="M1851.2,174c7.6,5,18.4,9.8,33.4,9.8c22,0,38.4-12.2,38.4-31.6c0-33-45.2-30.6-45.2-48.6
c0-6.2,6.2-9.6,13.8-9.6c8.8,0,16.2,3,25,7.8l0.4-19c-6-3.6-15.4-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.4,18.6
c13,14.4,38.4,16.8,38.4,30.6c0,8-8.6,10.6-16.4,10.6c-9.4,0-17.4-3.8-24-8L1851.2,174z M1769.6,164.2V95.8h13.4
c21.4,0,34.6,13.2,34.6,34.2c0,20.6-13.2,34.2-34.6,34.2H1769.6z M1748,182.4h34.6c34,0,57.6-21.6,57.6-53
c0-30.8-21.6-51.6-57.2-51.6h-35V182.4z M1666.4,182.4h60.6v-18h-39V138h33.6v-18.2H1688V95.6h38.8V77.8h-60.4V182.4z
M1584.8,182.4h60.6v-18h-39V138h33.4v-18.2h-33.4V95.6h38.6V77.8h-60.2V182.4z M1509.4,182.4h58.4v-18h-36.6V77.8h-21.8V182.4z
M1401,182.4h21.8v-44h32.4v-18h-32.4V95.6h38V77.8H1401V182.4z M1292.6,130c0-21.6,14.2-35.8,33-35.8s33.2,14.2,33.2,35.8
c0,21.8-14.4,35.8-33.2,35.8S1292.6,151.8,1292.6,130 M1269.8,130c0,31,24,53.8,55.8,53.8c32,0,55.8-22.8,55.8-53.8
s-23.8-53.8-55.8-53.8C1293.8,76.2,1269.8,99,1269.8,130 M1142.8,77.8l36.4,63.2v41.4h21.8v-41.2l36-63.4h-22.6l-16,29.4
c-2.4,4.4-5.4,10-7.6,14.8h-0.2c-2.4-4.8-5.2-10.6-7.8-15l-16-29.2H1142.8z M1047.8,95.6h31.4v86.8h21.6V95.6h31.4V77.8h-84.4V95.6
z M1007.6,182.4h21.6V77.8h-21.6V182.4z M915.2,174c7.4,5,18.2,9.8,33.2,9.8c22.4,0,38.4-11.6,38.4-31.6c0-32.4-45.2-31-45.2-48.6
c0-6.2,6.2-9.6,14-9.6c8.6,0,16,3,25,7.8l0.2-19c-5.8-3.6-15.2-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.6,18.6
c12.8,14.4,38.2,16.8,38.2,30.6c0,8-8.4,10.6-16.4,10.6c-9.4,0-17.2-3.8-24-8L915.2,174z M847.4,126V95.6h9.2
c10.4,0,16.2,6.2,16.2,14.4c0,9-7,16-16.2,16H847.4z M825.6,182.4h21.8V142h8.2c3.6,1.4,10,13.2,26,40.4h24.8
c-15.8-26.8-25.8-44.4-31.2-47.4v-0.2c9.6-4.4,19-13.4,19-27c0-16.2-10.2-30-38-30h-30.6V182.4z M744,182.4h60.8v-18h-39V138h33.4
v-18.2h-33.4V95.6h38.6V77.8H744V182.4z M624,77.8l43.4,105.4h17.4l44.6-105.4h-22.2l-22.8,55.8c-2.8,6.6-5,13.2-7.2,19.4h-0.4
c-2-6.2-4.4-12.6-7-19.4l-22-55.8H624z M587.6,182.4h21.6V77.8h-21.6V182.4z M465,182.4h21.4V125c0-4.8,0-11.2-0.4-14.6h0.4
c3,4.6,6,8.6,10,13.8l45.4,58.2H562V77.8h-21.4V131c0,4.4,0,11.4,0.2,16.4h-0.2c-3-4.4-5.8-8.6-10-13.8l-44-55.8H465V182.4z
M351.2,141.6c0,27.6,15.4,42.2,44.6,42.2c28,0,45.6-14.2,45.6-42.6V77.8h-21.8V141c0,16.2-8,24.6-23.4,24.6
c-14.6,0-23.2-8.8-23.2-24.6V77.8h-21.8V141.6z" />
<g>
<polygon class="st0" points="142,168.4 146.6,168.4 146.6,126.8 156.8,126.8 156.8,119.2 142,119.2 " />
<polygon class="st0" points="162.4,168.4 167,168.4 167,126.8 177.2,126.8 177.2,119.2 162.4,119.2 " />
<polygon class="st0" points="169,83.4 173.2,83.4 173.2,79.6 166.4,79.6 166.4,91 169,91 " />
<polygon class="st0" points="157,83.4 161.2,83.4 161.2,79.6 154.4,79.6 154.4,91 157,91 " />
<polygon class="st0" points="182.8,168.4 187.4,168.4 187.4,126.8 197.6,126.8 197.6,119.2 182.8,119.2 " />
<path class="st0" d="M184.2,206.3c0-8.4-6.6-14.2-14.4-14.2s-14.4,5.8-14.4,14.2c0,8.4,6.6,14.2,14.4,14.2
S184.2,214.7,184.2,206.3z M160.8,206.3c0-5.4,4.2-9,9-9s9,3.6,9,9c0,5.4-4.2,9-9,9S160.8,211.7,160.8,206.3z" />
<polygon class="st0" points="137.2,112.2 202.4,112.2 205.2,108 134.4,108 " />
<path class="st0" d="M0,0.1v261h114.2V192H142v69.1h4.6v-77.7H193v77.7h4.6V192h27.8v69.1H261V0.1H0z M169.6,30.1h0.4l26.8,16.4
h-54L169.6,30.1z M142.4,49.7h54.8l2.8,19.8h-60.4L142.4,49.7z M219.6,187.4h-22v-8.6H142v8.6h-22v-19.2h3.8v-62.8h6V72.8h80v32.6
h6v62.8h3.8V187.4z" />
<polygon class="st0" points="181,83.4 185.2,83.4 185.2,79.6 178.4,79.6 178.4,91 181,91 " />
</g>
</g>
</svg>
<span class="hide-accessible">University of Leeds homepage</span>
</a>
</div>
<nav class="uol-quicklinks" aria-label="University links">
<ul class="uol-quicklinks__list">
<li class="uol-quicklinks__group">
Students
<ul class="uol-quicklinks__group__list">
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/mobile-app">Mobile App</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/minerva">Minerva</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/for-students">For Students</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="https://library.leeds.ac.uk">Library</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/it">IT</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
</li>
</ul>
</li>
<li class="uol-quicklinks__group">
Staff
<ul class="uol-quicklinks__group__list">
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/for-staff">For Staff</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/services-a-z">Services A-Z</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/staff-a-z">Staff A-Z</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/faculty-a-z">Faculties A-Z</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/student-education-service">Student Education Service</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/hr">HR</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/it">IT</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
</li>
</ul>
</li>
<li class="uol-quicklinks__group">
Faculties
<ul class="uol-quicklinks__group__list">
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/arts-humanities-cultures">Faculty of Arts, Humanities and Cultures</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/biological-sciences">Faculty of Biological Sciences</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/business">Faculty of Business</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/engineering-physical-sciences">Faculty of Engineering and Physical Sciences</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/environment">Faculty of Environment</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/medicine-health">Faculty of Medicine and Health</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/social-sciences">Faculty of Social Sciences</a>
</li>
</ul>
</li>
</ul>
</nav>
<form id="uol-global-masthead__search-form" class="uol-global-masthead__search-form" action="/example-form-action">
<label class="uol-global-masthead__search-label" for="global-masthead__search-field">Search leeds.ac.uk</label>
<input class="uol-global-masthead__search-input" id="global-masthead__search-field" name="search-query" type="search" placeholder="Search leeds.ac.uk">
<button class="uol-global-masthead__search-submit" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
<path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
</svg>
<span class="hide-accessible">Search all leeds.ac.uk</span>
</button>
</form>
</div>
@mixin GlobalHeaderIconHover {
svg {
path,
polygon {
fill: $color-white;
transition: fill 0.3s ease;
}
}
&:focus {
outline: 2px dotted transparent;
}
&:hover,
&:focus {
svg {
path,
polygon {
fill: $color-brand--bright;
}
}
}
}
.uol-global-masthead-outer {
background: $color-black--dark;
}
.uol-global-masthead {
position: relative;
background: $color-black--dark;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: $color-white;
z-index: 2;
padding-bottom: 3px;
.uol-logo--inline {
z-index: 100;
height: 39px;
fill: #fff;
}
@include media("<uol-media-m") {
.uol-logo--inline__text {
display: none;
}
}
.js & {
min-height: 49px;
@include media(">=uol-media-l") {
flex-wrap: nowrap;
}
}
}
.uol-global-masthead__inner {
position: relative;
background: inherit;
@include media("<uol-media-m") {
z-index: 2;
flex-grow: 2;
max-width: $spacing-8;
}
@include media(">=uol-media-m") {
width: 20rem;
}
.uol-global-masthead--quicklinks-expanded & {
@include media("<uol-media-m") {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
left: -9999px;
}
}
}
.uol-global-masthead__home {
display: inline-block;
width: 40px;
height: 40px;
margin: $spacing-2 $spacing-4 0;
overflow: hidden;
position: relative;
@include media(">=uol-media-m") {
width: 288px;
}
@include media(">=uol-media-l") {
margin-left: $spacing-5;
}
@include media(">=uol-media-xl") {
margin-left: $spacing-6;
}
.uol-logo-uol-inline {
.uol-logo-uol-inline__img {
fill: $color-white;
}
}
&:focus {
outline: 2px solid $color-brand--bright;
outline-offset: 1px;
}
&:focus:not(:focus-visible) {
outline-width: 0;
}
&:focus-visible {
outline: 2px solid $color-brand--bright;
outline-offset: 1px;
}
}
// Rendered with JS
.uol-global-masthead__search-toggle {
@include GlobalHeaderIconHover;
@include button_focus(7px);
border: none;
background: transparent;
margin: 0 $spacing-4 0 0;
padding: $spacing-2 $spacing-2 $spacing-1;
&::before {
bottom: 8px;
}
&[aria-expanded="true"] {
background: $color-black;
}
.uol-global-masthead--quicklinks-expanded & {
@include media("<uol-media-m") {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
left: -9999px;
}
}
}
.uol-global-masthead__search-form {
@extend %text-size-paragraph;
position: relative;
display: flex;
input[type=search] {
-webkit-appearance: none;
}
&::before {
content: "";
position: absolute;
left: $spacing-4;
bottom: $spacing-3;
width: 0;
border-bottom: 6px solid $color-brand--bright;
transition: width 0.5s ease 0.1s;
}
&:focus-within::before {
width: calc(100% - #{$spacing-6});
}
@include media(">=uol-media-l") {
&::before {
left: 0;
bottom: 4px;
}
&:focus-within::before {
width: 100%;
}
}
@include media("<uol-media-l") {
visibility: hidden;
width: 100%;
padding: $spacing-4;
height: 45px;
background: $color-black;
transition: margin 0.3s ease, background 0.1s ease 0.3s;
// font-size: ;
@media (prefers-reduced-motion) {
transition: none;
}
}
@include media(">=uol-media-l") {
visibility: visible;
width: 376px;
margin-right: $spacing-6;
}
.js & {
@include media("<uol-media-l") {
margin-top: -85px;
z-index: -1;
}
@include media(">=uol-media-l") {
visibility: visible;
}
}
.no-js & {
@include media("<uol-media-l") {
width: 100%;
visibility: visible;
}
}
&[hidden] {
top: 0;
background-color: $color-black--dark;
visibility: hidden;
transition: top 0.5s ease, background 0s ease 0s;
@media (prefers-reduced-motion) {
transition: none;
}
}
&:focus-within {
&::after {
@include media(">=uol-media-l") {
background: transparent;
}
}
}
}
.uol-global-masthead__search-form--expanded {
background-color: $color-black;
visibility: visible;
.js & {
margin-top: 0;
}
}
.uol-global-masthead__search-label {
@extend .hide-accessible;
}
.uol-global-masthead__search-input {
flex: 1;
background: transparent;
border: none;
border-radius: 0;
color: $color-white;
padding: 6px;
border-bottom: 1px solid $color-white;
appearance: none;
&::placeholder {
color: darken($color-white, 40%);
font-size: 1.125rem;
}
@include media(">=uol-media-l") {
margin: 6px 0;
}
&:focus {
outline: 2px dotted transparent;
@include media("<uol-media-m") {
outline: 2px dotted transparent;
}
}
}
.uol-global-masthead__search-submit {
@include GlobalHeaderIconHover;
@include button_focus(6px);
&::before {
top: 0.3rem;
bottom: 0.5625rem;
border-width: 1px;
border-radius: 2px;
}
position: absolute;
right: $spacing-4;
top: $spacing-4;
background: transparent;
border: none;
color: $color-white;
margin: 0 $spacing-1 0 $spacing-2;
padding: $spacing-1 $spacing-2 0;
@include media(">=uol-media-l") {
top: 8px;
right: 0;
}
}
/*
* Search dropdown
*/
export const globalMastheadSearch = () => {
const iconSearch = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" focusable="false">
<path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
</svg>
`
const iconClose = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" focusable="false">
<path d="M25.33,8.55,23.45,6.67,16,14.12,8.55,6.67,6.67,8.55,14.12,16,6.67,23.45l1.88,1.88L16,17.88l7.45,7.45,1.88-1.88L17.88,16Z"></path>
</svg>
`
// Initiate search toggle
const searchToggleInitiate = () => {
// Get the form
const searchForm = document.querySelector('.uol-global-masthead__search-form')
if (window.innerWidth < 1024) {
if (searchForm) {
// Only if there is not already a toggle button
if ( !document.querySelector('.uol-global-masthead__search-toggle')) {
const searchField = searchForm.querySelector('#global-masthead__search-field')
const iconSearchLabel = '<span class="hide-accessible">Search form</span>'
const openSearch = () => {
// Update button
searchFormToggle.innerHTML = iconClose + iconSearchLabel
searchFormToggle.setAttribute('aria-expanded', true)
// Update form
searchForm.hidden = false
searchForm.classList.add('uol-global-masthead__search-form--expanded')
searchField.focus()
}
const closeSearch = () => {
// Update button
searchFormToggle.innerHTML = iconSearch + iconSearchLabel
searchFormToggle.setAttribute('aria-expanded', false)
// Update form
searchForm.hidden = true
searchForm.classList.remove('uol-global-masthead__search-form--expanded')
}
// Hide form on load
searchForm.hidden = true
// Create toggle button
const searchFormToggle = document.createElement('button')
searchFormToggle.classList.add('uol-global-masthead__search-toggle')
searchFormToggle.setAttribute('type', 'button')
searchFormToggle.setAttribute('aria-expanded', false)
searchFormToggle.setAttribute('aria-controls', 'uol-global-masthead__search-form')
searchFormToggle.innerHTML = iconSearch + iconSearchLabel
searchFormToggle.classList.add('uol-global-masthead__search-toggle--search')
// Insert button
searchForm.before(searchFormToggle)
// Button click
searchFormToggle.addEventListener( 'click', () => {
let expanded = searchFormToggle.getAttribute('aria-expanded') === 'true' || false
if (!expanded) {
openSearch()
} else {
closeSearch()
}
// Close search form on Escape
searchForm.addEventListener('keydown', (event) => {
if(event.key === "Escape") {
closeSearch()
searchFormToggle.focus()
}
})
})
}
}
} else {
const searchFormToggle = document.querySelector('.uol-global-masthead__search-toggle')
if (searchFormToggle) {
searchFormToggle.remove()
searchForm.removeAttribute('hidden')
searchForm.classList.remove('uol-global-masthead__search-form--expanded')
}
}
}
window.addEventListener('resize', searchToggleInitiate)
var resizeEvent = window.document.createEvent('UIEvents')
resizeEvent.initUIEvent('resize', true, false, window, 0)
window.dispatchEvent(resizeEvent)
}
{
"home_label": "University of Leeds homepage",
"home_url": "https://leeds.ac.uk",
"global_quicklinks": [
{
"title": "Students",
"links": [
{
"title": "Mobile App",
"url": "/mobile-app"
},
{
"title": "Minerva",
"url": "/minerva"
},
{
"title": "For Students",
"url": "/for-students"
},
{
"title": "Library",
"url": "https://library.leeds.ac.uk"
},
{
"title": "IT",
"url": "/it"
},
{
"title": "Campus map",
"url": "/campus-map"
}
]
},
{
"title": "Staff",
"links": [
{
"title": "For Staff",
"url": "/staff/for-staff"
},
{
"title": "Services A-Z",
"url": "/staff/services-a-z"
},
{
"title": "Staff A-Z",
"url": "/staff/staff-a-z"
},
{
"title": "Faculties A-Z",
"url": "/staff/faculty-a-z"
},
{
"title": "Student Education Service",
"url": "/staff/student-education-service"
},
{
"title": "HR",
"url": "/staff/hr"
},
{
"title": "IT",
"url": "/staff/it"
},
{
"title": "Campus map",
"url": "/campus-map"
}
]
},
{
"title": "Faculties",
"links": [
{
"title": "Faculty of Arts, Humanities and Cultures",
"url": "/faculty/arts-humanities-cultures"
},
{
"title": "Faculty of Biological Sciences",
"url": "/faculty/biological-sciences"
},
{
"title": "Faculty of Business",
"url": "/faculty/business"
},
{
"title": "Faculty of Engineering and Physical Sciences",
"url": "/faculty/engineering-physical-sciences"
},
{
"title": "Faculty of Environment",
"url": "/faculty/environment"
},
{
"title": "Faculty of Medicine and Health",
"url": "/faculty/medicine-health"
},
{
"title": "Faculty of Social Sciences",
"url": "/faculty/social-sciences"
}
]
}
],
"global_search": {
"action": "/example-form-action",
"input_label": "Search leeds.ac.uk",
"input_placeholder": "Search leeds.ac.uk",
"submit_label": "Search all leeds.ac.uk"
}
}