Header
A JSON version of the header is included in snippets/layout.json
Content with a data-ucas-content attribute would need to be replaced with markup from the UCAS Content API.
Content with a data-ucas-content-optional attribute can be omitted.
<!-- START header_complete component -->
<!-- START header upper component -->
<section class="section section--upper-header global-header global-header--learners " id="section--upper-header" data-generated-at="2023-12-11T12:00:28+00:00" data-designframework="4.15.1">
<a href="#main-content" class="skip-navigation">Skip navigation</a>
<div class="wrapper">
<!-- START UCAS corporate logo component -->
<a class="logo" data-ucas-content="UcasLogoLink" href="../../../../index.html"> <div class="logo__image"><img alt="UCAS home page" src="https://prod.df.ucascdn.com/4.15.1/images/logo.svg" /></div>
</a><!-- END UCAS corporate logo component -->
<div class="meganav">
<a href="https://www.ucas.com/explore/search" class="meganav__toggle" id="meganav-toggle">
Search
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<div class="meganav__menu" id="meganav-menu">
<nav class="meganav__links-wrapper">
<ul class="meganav__links" data-ucas-content="GlobalMenu">
<!-- Dynamic menu component start -->
<li class="global-link">
<a href="https://www.ucas.com/further-education" class="global-link__link">
<span class="global-link__title">Further education</span>
<span class="global-link__description">Finishing GCSEs or Nationals?</span>
</a>
<button class="button button--small button--secondary link-panel__toggle" style="display:none;" aria-label="Open Further education navigation panel">Open panel</button>
<div class="link-panel">
<div class="wrapper">
<div class="link-panel__subject">
<h2 class="link-panel__subject-title">Finishing GCSEs or Nationals?</h2>
<p class="link-panel__subject-description">Find out your options and start planning your next steps</p>
<button class="button button--rounded button--rounded--light-ghost">Explore subjects and careers</button>
</div>
<div class="link-panel__blocks">
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Study options, qualifications & careers</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">A levels and AS level courses</a></li>
<li class="link-panel__block-link"><a href="#">BTEC diplomas</a></li>
<li class="link-panel__block-link"><a href="#">NVQs</a></li>
<li class="link-panel__block-link"><a href="#">Careers ideas</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Search and apply for courses</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">UCAS Progress search</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Apprenticeships for post 16</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">What are apprenticeships?</a></li>
<li class="link-panel__block-link"><a href="#">Applying for apprenticeships</a></li>
<li class="link-panel__block-link"><a href="#">Higher apprenticeships, or degree level</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Thinking about university?</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Where to start?</a></li>
<li class="link-panel__block-link"><a href="#">What are UCAS Tariff points</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Work experience</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">CV's and covering letters</a></li>
<li class="link-panel__block-link"><a href="#">Volunteering</a></li>
<li class="link-panel__block-link"><a href="#">Working for yourself</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/undergraduate" class="global-link__link">
<span class="global-link__title">Undergraduate</span>
<span class="global-link__description">Going to University?</span>
</a>
<button class="button button--small button--secondary link-panel__toggle" style="display:none;" aria-label="Open Undergraduate navigation panel">Open panel</button>
<div class="link-panel">
<div class="wrapper">
<div class="link-panel__subject">
<h2 class="link-panel__subject-title">Going to University?</h2>
<p class="link-panel__subject-description">Information and advice about University, courses and apprenticeships</p>
<button class="button button--rounded button--rounded--light-ghost">Plan your future</button>
</div>
<div class="link-panel__blocks">
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Applying to university</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">When to apply</a></li>
<li class="link-panel__block-link"><a href="#">How to apply</a></li>
<li class="link-panel__block-link"><a href="#">UCAS tariff points</a></li>
<li class="link-panel__block-link"><a href="#">Start your application</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">What and where to study</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Subjects</a></li>
<li class="link-panel__block-link"><a href="#">Comparing universities and colleges</a></li>
<li class="link-panel__block-link"><a href="#">Teacher training undergraduate</a></li>
<li class="link-panel__block-link"><a href="#">Open days and events</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">After applying</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Track your application</a></li>
<li class="link-panel__block-link"><a href="#">Interviews and auditions</a></li>
<li class="link-panel__block-link"><a href="#">Decisions and offers</a></li>
<li class="link-panel__block-link"><a href="#">Results and Clearing</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">How to study</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Degrees and HNDs</a></li>
<li class="link-panel__block-link"><a href="#">Full time study</a></li>
<li class="link-panel__block-link"><a href="#">Part time or flexible study</a></li>
<li class="link-panel__block-link"><a href="#">Apprenticeships (higher & technical)</a></li>
<li class="link-panel__block-link"><a href="#">Distance learning and Open university</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Tuition fees and student loans</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Tuition fees</a></li>
<li class="link-panel__block-link"><a href="#">Student loans</a></li>
<li class="link-panel__block-link"><a href="#">Managing money</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Life at university</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Life of a student</a></li>
<li class="link-panel__block-link"><a href="#">Accomodation</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/postgraduate" class="global-link__link">
<span class="global-link__title">Postgraduate</span>
<span class="global-link__description">Returning to university?</span>
</a>
<button class="button button--small button--secondary link-panel__toggle" style="display:none;" aria-label="Open Postgraduate navigation panel">Open panel</button>
<div class="link-panel">
<div class="wrapper">
<div class="link-panel__subject">
<h2 class="link-panel__subject-title">Returning to university?</h2>
<p class="link-panel__subject-description">All the information you need to take your education to the next level and beyond</p>
<button class="button button--rounded button--rounded--light-ghost">How we can help</button>
</div>
<div class="link-panel__blocks">
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">How to Apply</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Already applied through UCAS? Log into your account</a></li>
<li class="link-panel__block-link"><a href="#">Postgraduate performing arts at a conservatoire</a></li>
<li class="link-panel__block-link"><a href="#">Research options</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Loans and funding</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">New postgraduate loans</a></li>
<li class="link-panel__block-link"><a href="#">Search for funding</a></li>
<li class="link-panel__block-link"><a href="#">Apply for a loan</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Subjects</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">What to study</a></li>
<li class="link-panel__block-link"><a href="#">Types of qualification</a></li>
<li class="link-panel__block-link"><a href="#">Apprenticeships for postgraduate</a></li>
<li class="link-panel__block-link"><a href="#">Conservatoires for postgraduate</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Teacher Training postgraduate</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Becoming a teacher in the UK</a></li>
<li class="link-panel__block-link"><a href="#">Training to teach in England</a></li>
<li class="link-panel__block-link"><a href="#">Teacher Training search and Apply</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/understanding-apprenticeships" class="global-link__link">
<span class="global-link__title">Apprenticeships</span>
<span class="global-link__description">Apprenticeships and jobs</span>
</a>
<button class="button button--small button--secondary link-panel__toggle" style="display:none;" aria-label="Open Apprenticeships navigation panel">Open panel</button>
<div class="link-panel">
<div class="wrapper">
<div class="link-panel__subject">
<h2 class="link-panel__subject-title">Apprenticeships and jobs</h2>
<p class="link-panel__subject-description">Not sure if uni is for you? Find out what else you can do</p>
<button class="button button--rounded button--rounded--light-ghost">Explore your options</button>
</div>
<div class="link-panel__blocks">
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Apprenticeships</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">What's involved?</a></li>
<li class="link-panel__block-link"><a href="#">How to apply</a></li>
<li class="link-panel__block-link"><a href="#">Finance and funding</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Gap year</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Why take a gap year?</a></li>
<li class="link-panel__block-link"><a href="#">Things to consider</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Technical or professional qualifications</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Explore career options</a></li>
<li class="link-panel__block-link"><a href="#">Application process</a></li>
<li class="link-panel__block-link"><a href="#">What are technical or professional qualifications?</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Internships</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">What is an internship?</a></li>
<li class="link-panel__block-link"><a href="#">Voluntary, unpaid</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/careers-advice" class="global-link__link">
<span class="global-link__title">Careers</span>
<span class="global-link__description">Careers</span>
</a>
<button class="button button--small button--secondary link-panel__toggle" style="display:none;" aria-label="Open Careers navigation panel">Open panel</button>
<div class="link-panel">
<div class="wrapper">
<div class="link-panel__subject">
<h2 class="link-panel__subject-title">Careers</h2>
<p class="link-panel__subject-description">Helping you find your dream career</p>
<button class="button button--rounded button--rounded--light-ghost">Careers support and advice</button>
</div>
<div class="link-panel__blocks">
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Finding a career</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Career quiz</a></li>
<li class="link-panel__block-link"><a href="#">Explore job roles</a></li>
<li class="link-panel__block-link"><a href="#">Working for yourself</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Getting a job</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">CVs and covering letters</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Interviews</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Where to look for jobs</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3 class="link-panel__block-title"><a href="">Employment</a></h3>
<ul>
<li class="link-panel__block-link"><a href="#">Understanding employment contracts</a></li>
<li class="link-panel__block-link"><a href="#">Your first payslip</a></li>
<li class="link-panel__block-link"><a href="#">Types of employments</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- Dynamic menu component end -->
</ul>
</nav>
</div>
<!-- START header search component -->
<div class="meganav__search-widget" data-ucas-content="GlobalSearch" data-ucas-content-optional>
<a href="https://www.ucas.com/explore/search" class="search-widget__toggle" id="header-search-toggle">Search</a>
<div class="search-widget__wrapper wrapper">
<div class="search-widget__inner">
<form action="https://www.ucas.com/explore/search" method="get" class="search-widget__inner-content">
<div class="v5-form-item v5-form-item--clear v5-form-item--oversized v5-form-pair v5-form-pair--search">
<label class="hide-element" for="keywords">Search field:</label>
<input type="search" id="keywords" name="query" value="" placeholder="Advice, courses and locations" class="v5-form-pair__input">
<input type="submit" value="Submit" title="Submit" class="v5-form-pair__submit">
</div>
</form>
</div>
</div>
<div class="search-widget__extended" data-ucas-content="ExtendedSearch" data-ucas-content-optional>
<div class="search-widget__extended-wrapper">
<div class="wrapper">
<div class="link-panel__block">
<h2>Not sure what to do?</h2>
<p>Browse subjects, locations and universities</p>
<button class="button">Explore your options</button>
</div>
<div class="link-panel__block">
<h3>Popular topics</h3>
<ul class="link-panel__block-list">
<li><a href="#" class="link">How to apply to university</a></li>
<li><a href="#" class="link">Writing a personal statement</a></li>
<li><a href="#" class="link">Tracking your application</a></li>
</ul>
</div>
<div class="link-panel__block">
<h3>Popular subjects</h3>
<ul class="link-panel__block-list">
<li><a href="#" class="link">Mathematics</a></li>
<li><a href="#" class="link">Law</a></li>
<li><a href="#" class="link">Business</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END header search component -->
<!-- START user-menu-logged-out component -->
<div class="meganav__users"
data-ucas-content="UcasUserMenu"
data-uid=""
data-avatar=""
data-first-name=""
data-user-preference=""
data-ucascom-domain="https://www.ucas.com"
data-digital-domain="https://digital.ucas.com"
data-accounts-domain="https://accounts.ucas.com"
>
<a role="button" aria-controls="user-menu" aria-expanded="false" href="https://accounts.ucas.com/account/login?source=usermenu" class="meganav__user-menu-toggle meganav__user-menu-toggle--loading" id="user-menu-trigger">
<span class="hide-element">User menu</span>
<div class="meganav__user-menu-text" aria-hidden="false"></div>
<div class="meganav__user-menu-icon"></div>
</a>
<div class="meganav__user-menu" id="user-menu">
<div class="meganav__user-menu-wrapper"></div>
</div>
</div>
<!-- END user-menu-logged-out component -->
</div>
</div>
</section>
<!-- END header upper component -->
<!-- END header_complete component -->
Content API fallback
The markup can be used for as fallback (if you are looking at this on a prod environment):
<!-- START header_complete component -->
<!-- START header upper component -->
<section class="section section--upper-header global-header global-header--learners " id="section--upper-header" data-generated-at="2023-12-11T12:00:29+00:00" data-designframework="4.15.1">
<a href="#main-content" class="skip-navigation">Skip navigation</a>
<div class="wrapper">
<!-- START UCAS corporate logo component -->
<a class="logo" data-ucas-content="UcasLogoLink" href="https://www.ucas.com"> <div class="logo__image"><img alt="UCAS home page" src="https://prod.df.ucascdn.com/4.15.1/images/logo.svg" /></div>
</a><!-- END UCAS corporate logo component -->
<div class="meganav">
<a href="https://www.ucas.com/explore/search" class="meganav__toggle" id="meganav-toggle">
Search
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<div class="meganav__menu" id="meganav-menu">
<nav class="meganav__links-wrapper">
<ul class="meganav__links" data-ucas-content="GlobalMenu">
<!-- Dynamic menu component start -->
<li class="global-link">
<a href="https://www.ucas.com/further-education" class="global-link__link">
<span class="global-link__title">Further education</span>
<span class="global-link__description">Finishing GCSEs or Nationals?</span>
</a>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/undergraduate" class="global-link__link">
<span class="global-link__title">Undergraduate</span>
<span class="global-link__description">Going to University?</span>
</a>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/postgraduate" class="global-link__link">
<span class="global-link__title">Postgraduate</span>
<span class="global-link__description">Returning to university?</span>
</a>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/understanding-apprenticeships" class="global-link__link">
<span class="global-link__title">Apprenticeships</span>
<span class="global-link__description">Apprenticeships and jobs</span>
</a>
</li>
<!-- Dynamic menu component end -->
<li class="global-link">
<a href="https://www.ucas.com/careers-advice" class="global-link__link">
<span class="global-link__title">Careers</span>
<span class="global-link__description">Careers</span>
</a>
</li>
<!-- Dynamic menu component end -->
</ul>
</nav>
</div>
<!-- START header search component -->
<div class="meganav__search-widget" data-ucas-content="GlobalSearch" data-ucas-content-optional>
<a href="https://www.ucas.com/explore/search" class="search-widget__toggle" id="header-search-toggle">Search</a>
<div class="search-widget__wrapper wrapper">
<div class="search-widget__inner">
<form action="https://www.ucas.com/explore/search" method="get" class="search-widget__inner-content">
<div class="v5-form-item v5-form-item--clear v5-form-item--oversized v5-form-pair v5-form-pair--search">
<label class="hide-element" for="keywords">Search field:</label>
<input type="search" id="keywords" name="query" value="" placeholder="Advice, courses and locations" class="v5-form-pair__input">
<input type="submit" value="Submit" title="Submit" class="v5-form-pair__submit">
</div>
</form>
</div>
</div>
</div>
<!-- END header search component -->
<!-- START user-menu-logged-out component -->
<div class="meganav__users"
data-ucas-content="UcasUserMenu"
data-uid=""
data-avatar=""
data-first-name=""
data-user-preference=""
data-ucascom-domain="https://www.ucas.com"
data-digital-domain="https://digital.ucas.com"
data-accounts-domain="https://accounts.ucas.com"
>
<a role="button" aria-controls="user-menu" aria-expanded="false" href="https://accounts.ucas.com/account/login?source=usermenu" class="meganav__user-menu-toggle meganav__user-menu-toggle--loading" id="user-menu-trigger">
<span class="hide-element">User menu</span>
<div class="meganav__user-menu-text" aria-hidden="false"></div>
<div class="meganav__user-menu-icon"></div>
</a>
<div class="meganav__user-menu" id="user-menu">
<div class="meganav__user-menu-wrapper"></div>
</div>
</div>
<!-- END user-menu-logged-out component -->
</div>
</div>
</section>
<!-- END header upper component -->
<!-- END header_complete component -->