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" aria-current="page">
<svg class="uol-logo-uol-inline" width="286px" height="40px" viewBox="0 0 286 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g class="uol-logo-uol-inline__img" transform="translate(-32.000000, -12.000000)" fill="#000000">
<g transform="translate(32.000000, 12.000000)">
<path d="M29.5,13.85 L30.04,13.85 L30.04,13.38 L29.12,13.38 L29.12,14.85 L29.42,14.85 L29.5,13.85 Z M27.89,13.85 L28.43,13.85 L28.43,13.38 L27.62,13.38 L27.62,14.85 L28,14.85 L28,13.85 L27.89,13.85 Z M0,0 L0,40 L20.77,40 L20.77,28 L24.29,28 L24.29,40 L24.75,40 L24.75,26.85 L31.19,26.85 L31.19,40 L31.62,40 L31.62,28 L35.22,28 L35.22,40 L39.97,40 L39.97,0 L0,0 Z M28,6.81 L31.49,9 L24.49,9 L28,6.81 Z M24.44,9.36 L31.62,9.36 L31.95,12 L24.06,12 L24.44,9.36 Z M34.44,27.54 L31.72,27.54 L31.72,26.38 L24.37,26.38 L24.37,27.54 L21.62,27.54 L21.62,25.07 L22.08,25.07 L22.08,16.71 L22.84,16.71 L22.84,12.38 L33.18,12.38 L33.18,16.71 L33.95,16.71 L33.95,25 L34.41,25 L34.44,27.54 Z M29.69,25.07 L30.3,25.07 L30.3,19.57 L31.62,19.57 L31.62,18.57 L29.73,18.57 L29.69,25.07 Z M23.69,17.64 L32.2,17.64 L32.62,17.1 L23.37,17.1 L23.69,17.64 Z M26.99,25.07 L27.62,25.07 L27.62,19.57 L28.92,19.57 L28.92,18.57 L26.97,18.57 L26.99,25.07 Z M26.22,13.85 L26.76,13.85 L26.76,13.38 L25.92,13.38 L25.92,14.85 L26.22,14.85 L26.22,13.85 Z M24.37,25.07 L24.98,25.07 L24.98,19.57 L26.28,19.57 L26.28,18.57 L24.37,18.57 L24.37,25.07 Z M28.05,28.55 C27.2950895,28.5378224 26.6077131,28.9831944 26.3103442,29.6771757 C26.0129753,30.3711569 26.1646185,31.1760463 26.6941324,31.7142407 C27.2236463,32.2524352 28.0259637,32.4171451 28.7246881,32.131099 C29.4234126,31.8450529 29.8799018,31.1650087 29.88,30.41 C29.874812,29.3965391 29.0632426,28.5716653 28.05,28.55 L28.05,28.55 Z M28.05,31.8 C27.4802734,31.8121976 26.9600047,31.4778532 26.73441,30.954552 C26.5088152,30.4312508 26.6229172,29.8234297 27.0229366,29.4175706 C27.422956,29.0117115 28.0290597,28.888813 28.5555753,29.1068004 C29.0820908,29.3247877 29.4239399,29.8401565 29.42,30.41 L29.42,30.41 C29.4226618,30.7760016 29.279816,31.1280692 29.0228891,31.3887468 C28.7659622,31.6494245 28.4160018,31.7973574 28.05,31.8 Z" fill-rule="nonzero"></path>
<path d="M67.74,21.56 L67.74,12.11 L64.52,12.11 L64.52,21.78 C64.5729285,22.6519371 64.2821511,23.5099099 63.71,24.17 C62.2015798,25.4907365 59.9484202,25.4907365 58.44,24.17 C57.8375091,23.4681634 57.5230989,22.5642339 57.56,21.64 L57.56,12.11 L54.36,12.11 L54.36,21.9 C54.2611083,23.4971923 54.8130316,25.066386 55.89,26.25 C57.3080282,27.4384118 59.1354122,28.0236055 60.98,27.88 C62.8798784,28.0022464 64.7494205,27.3574525 66.17,26.09 C67.2665719,24.8598816 67.8310989,23.2454064 67.74,21.6 L67.74,21.56 Z" fill-rule="nonzero"></path>
<path d="M86.32,27.75 L86.32,12.25 L83.12,12.25 L83.12,20.16 C83.12,20.82 83.12,21.79 83.12,22.61 L83.12,22.61 C82.6700679,21.9172776 82.1826769,21.2496187 81.66,20.61 L75.13,12.28 L71.86,12.28 L71.86,27.78 L75.08,27.78 L75.08,19.26 C75.08,18.56 75.08,17.63 75.02,17.1 L75.08,17.1 C75.53,17.78 75.97,18.38 76.56,19.1 L83.3,27.71 L86.32,27.75 Z"></path>
<polygon fill-rule="nonzero" points="93.91 27.75 93.91 12.24 90.67 12.24 90.67 27.75 93.91 27.75"></polygon>
<path d="M111.16,12.19 L107.89,12.19 L104.39,20.53 C103.973063,21.4323296 103.615632,22.3609812 103.32,23.31 L103.32,23.31 C103,22.44 102.65,21.45 102.25,20.44 L99.08,12.19 L95.54,12.19 L101.91,27.81 L104.31,27.81 L111.16,12.19 Z" fill-rule="nonzero"></path>
<polygon fill-rule="nonzero" points="121.99 27.75 121.99 25.11 116.24 25.11 116.24 21.15 121.18 21.15 121.18 18.5 116.24 18.5 116.24 14.88 121.16 14.88 122.02 12.24 113.02 12.24 113.02 27.75 121.99 27.75"></polygon>
<path d="M137.49,27.75 C135.14,23.8 133.65,21.22 132.86,20.75 L132.86,20.75 C134.52497,20.1129167 135.639353,18.532231 135.68,16.75 C135.68,14.36 134.19,12.27 130.05,12.27 L125.52,12.27 L125.52,27.75 L128.78,27.75 L128.78,21.75 L129.92,21.75 C130.49,21.97 131.43,23.75 133.78,27.75 L137.49,27.75 Z M132.49,17.03 C132.512387,18.2982154 131.50799,19.3472518 130.24,19.38 L128.75,19.38 L128.75,14.92 L130.11,14.92 C130.7095,14.8426398 131.31339,15.0261093 131.768537,15.4238853 C132.223685,15.8216613 132.486376,16.39554 132.49,17 L132.49,17.03 Z"></path>
<path d="M148.78,23.39 C148.78,18.49 142.11,18.76 142.11,16.04 C142.11,15.15 143,14.63 144.11,14.63 C145.425193,14.6783583 146.704585,15.071487 147.82,15.77 L147.82,12.98 C146.617964,12.3388574 145.27211,12.0153018 143.91,12.04 C140.49,12.04 138.63,14.1 138.63,16.47 C138.606448,17.4826835 138.96324,18.4674294 139.63,19.23 C141.53,21.37 145.29,21.72 145.29,23.78 C145.29,24.95 144.03,25.37 142.84,25.37 C141.564416,25.3277619 140.3296,24.9103591 139.29,24.17 L138.04,26.5 C139.513506,27.5085649 141.264687,28.0328708 143.05,28 C146.24,28 148.76,26.24 148.76,23.4 L148.78,23.39 Z" fill-rule="nonzero"></path>
<polygon fill-rule="nonzero" points="154.63 27.75 154.63 12.24 151.4 12.24 151.4 27.75 154.63 27.75"></polygon>
<polygon fill-rule="nonzero" points="169.59 12.24 156.9 12.24 156.9 14.88 161.44 14.88 161.44 27.75 164.7 27.75 164.7 14.88 168.86 14.88 169.59 12.24"></polygon>
<path d="M183.77,12.25 L180.4,12.25 L178.03,16.62 C177.68,17.27 177.21,18.11 176.91,18.81 L176.91,18.81 C176.59,18.11 176.1,17.23 175.77,16.58 L173.36,12.25 L169.81,12.25 L175.18,21.62 L175.18,27.75 L178.38,27.75 L178.38,21.66 L183.77,12.25 Z" fill-rule="nonzero"></path>
<path d="M206.12,20 C206.245834,18.0205657 205.578218,16.0725084 204.264697,14.5863532 C202.951177,13.1001981 201.099898,12.198307 199.12,12.08 L199.12,12.08 C198.786933,12.0611526 198.453067,12.0611526 198.12,12.08 C195.961198,12.0257615 193.874951,12.8609834 192.35,14.39 C190.865298,15.950778 190.059803,18.0364334 190.11,20.19 C190.031444,22.4287273 190.92044,24.5929231 192.55,26.13 C195.937737,28.8012328 200.76331,28.6190558 203.94,25.7 C205.369447,24.1531499 206.131218,22.1049922 206.06,20 L206.12,20 Z M202.7,20.07 C202.7,23.47 200.7,25.41 198.1,25.41 C195.5,25.41 193.46,23.47 193.46,20.07 C193.46,16.67 195.38,14.72 198.07,14.72 C200.76,14.72 202.67,16.72 202.67,20.07 L202.7,20.07 Z"></path>
<polygon fill-rule="nonzero" points="218.11 12.24 209.08 12.24 209.08 27.75 212.32 27.75 212.32 21.2 217.23 21.2 217.22 18.56 212.32 18.56 212.32 14.88 217.28 14.88 218.11 12.24"></polygon>
<polygon fill-rule="nonzero" points="234.6 27.73 234.6 25.07 229.16 25.07 229.16 12.27 225.95 12.27 225.95 27.73 234.6 27.73"></polygon>
<polygon fill-rule="nonzero" points="245.68 27.73 245.68 25.09 239.94 25.09 239.94 21.15 244.86 21.15 244.86 18.5 239.94 18.5 239.94 14.89 244.84 14.89 245.7 12.27 236.71 12.27 236.71 27.73 245.68 27.73"></polygon>
<polygon fill-rule="nonzero" points="257.43 27.73 257.43 25.09 251.69 25.09 251.69 21.15 256.62 21.15 256.62 18.5 251.69 18.5 251.69 14.89 256.59 14.89 257.43 12.27 248.46 12.27 248.46 27.73 257.43 27.73"></polygon>
<path d="M273.98,19.86 C273.98,15.24 270.88,12.27 265.36,12.27 L260.21,12.27 L260.21,27.73 L265.1,27.73 C270.47,27.73 274.01,24.63 274.01,19.87 L273.98,19.86 Z M270.53,19.95 C270.53,22.66 269.03,25.07 265.2,25.07 L263.43,25.07 L263.43,14.93 L265.14,14.93 C268.69,14.93 270.53,16.91 270.53,20 L270.53,19.95 Z"></path>
<path d="M285.62,23.37 C285.62,18.47 278.96,18.73 278.96,16.06 C278.96,15.16 279.85,14.64 281.01,14.64 C282.312256,14.700739 283.578073,15.0894273 284.69,15.77 L284.69,13 C283.499562,12.3319884 282.154998,11.9872284 280.79,12 C277.38,12 275.52,14.07 275.52,16.41 C275.503151,17.4215754 275.859097,18.4039867 276.52,19.17 C278.4,21.31 282.16,21.62 282.16,23.71 C282.16,24.88 280.88,25.34 279.76,25.34 C278.496079,25.2834172 277.277636,24.8517403 276.26,24.1 L275.01,26.42 C276.470725,27.3959037 278.193447,27.9050483 279.95,27.88 C283.15,27.94 285.62,26.18 285.62,23.37 Z" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
<span class="hide-accessible">University of Leeds example not 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;
@media (-ms-high-contrast: active) {
fill: ButtonText;
}
}
}
&:focus {
outline: 2px dotted transparent;
}
&:hover,
&:focus {
svg {
path,
polygon {
fill: $color-brand--bright;
@media (-ms-high-contrast: active) {
fill: -ms-hotlight;
fill: LinkText; // TODO: Fix HC colours
}
}
}
}
}
.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;
@media (-ms-high-contrast: active) {
border-bottom: 1px solid windowText;
}
.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-1 $spacing-4 0;
overflow: hidden;
position: relative;
@include media(">=uol-media-m") {
width: 286px;
}
@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;
@media screen and (-ms-high-contrast: active) {
fill: windowText;
}
}
}
&: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;
.no-csspositionsticky & {
&:focus {
border-bottom-color: $color-brand--bright;
}
}
// TODO: Hack to stop iOS rounding search inputs. Needs a tidy.
&input[type=search] {
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 example not 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"
},
"current": true
}