Navigation - Header
Use the header to show users they are on an HS2 service and help them get started in finding what they need.
Open this default header example in new window
Copy default header code
Close default header code
<header class="hs2-header" role="banner">
<div class="hs2-width-container hs2-header__container app-width-container">
<div class="header-wrapper">
<div class="align-center">
<div class="hs2-header__logo"><a class="hs2-header__link" href="/" aria-label="hs2 homepage">
<svg class="hs2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.04 107.9" height="20" width="45">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #1E3475
}
</style>
</defs>
<g id="hs2-logo">
<g>
<path class="cls-1 " d="M93.56,2.96V42.7H21.38V2.96c0-1.13-.91-2.04-2.04-2.04H2.04C.91,.92,0,1.83,0,2.96V104.52c0,1.13,.91,2.04,2.04,2.04H19.34c1.13,0,2.04-.91,2.04-2.04v-40.43H93.56v40.43c0,1.13,.91,2.04,2.04,2.04h17.3c1.13,0,2.04-.91,2.04-2.04V2.96c0-1.13-.91-2.04-2.04-2.04h-17.3c-1.13,0-2.04,.91-2.04,2.04Z" />
<path class="cls-1 " d="M230.47,28.67l-8.17-15.14c-.45-.83-.26-1.85,.43-2.49,1.83-1.71,3.97-3.31,6.34-4.79,2.89-1.8,6.26-3.31,10-4.48,3.77-1.18,8.12-1.77,12.94-1.77,5.42,0,10.38,.84,14.74,2.49,4.38,1.66,8.16,4.03,11.23,7.03,3.08,3.01,5.48,6.68,7.12,10.89,1.64,4.2,2.47,8.86,2.47,13.87,0,3.27-.39,6.33-1.17,9.11-.77,2.77-1.84,5.41-3.18,7.86-1.33,2.44-2.93,4.82-4.75,7.09-1.79,2.23-3.76,4.47-5.84,6.68l-19.49,20.5h34.85c1.13,0,2.04,.91,2.04,2.04v16.98c0,1.13-.91,2.04-2.04,2.04h-65.26c-1.13,0-2.04-.91-2.04-2.04v-13.67c0-.97,.38-1.91,1.05-2.61l35.05-36.29c2.64-2.67,4.65-5.39,5.98-8.1,1.3-2.65,1.96-5.51,1.96-8.51,0-2.06-.34-3.95-1.02-5.64-.68-1.68-1.64-3.16-2.86-4.39-1.22-1.23-2.71-2.2-4.43-2.88-1.74-.69-3.71-1.04-5.85-1.04-2.27,0-4.34,.29-6.15,.85-1.84,.57-3.55,1.35-5.08,2.31-1.55,.97-2.97,2.15-4.33,3.41-.49,.45-.95,.86-1.39,1.24-.99,.86-2.52,.59-3.14-.56Z" />
<path class="cls-1 " d="M208.06,61.42c-1.64-3.39-3.91-6.32-6.75-8.71-2.81-2.35-6.16-4.28-9.96-5.72-3.75-1.42-7.83-2.52-12.14-3.25l-5.38-.94c-2.81-.48-5.43-1.02-7.8-1.62-2.31-.58-4.32-1.3-5.98-2.13-1.57-.78-2.8-1.75-3.65-2.88-.8-1.05-1.19-2.32-1.19-3.87,0-1.7,.38-3.16,1.17-4.46,.8-1.33,1.94-2.47,3.38-3.41,1.49-.97,3.31-1.72,5.39-2.24,2.12-.53,4.5-.8,7.06-.8,5.05,0,9.81,.81,14.15,2.4,4.04,1.48,7.83,3.35,11.32,5.52,0,0,.01-.01,.01-.02,.33,.21,.72,.33,1.14,.33,.84,0,1.57-.49,1.92-1.19,0,0,0,0,0,0l8.05-14.86s0,0,0,0c.19-.32,.3-.69,.3-1.09,0-.79-.43-1.47-1.06-1.85-2.78-1.72-5.56-3.25-8.27-4.53-2.96-1.4-5.98-2.56-8.97-3.44-2.98-.88-6.08-1.54-9.21-1.96-3.12-.42-6.42-.63-9.8-.63-5.16,0-10.14,.71-14.81,2.12-4.69,1.41-8.88,3.53-12.45,6.3-3.6,2.79-6.51,6.33-8.64,10.52-2.15,4.22-3.24,9.13-3.24,14.6,0,4.77,.77,8.62,2.29,12.11,1.52,3.5,3.66,6.5,6.37,8.91,2.68,2.38,5.88,4.33,9.53,5.78,3.59,1.43,7.57,2.52,11.86,3.26l6.04,1.02c3.27,.57,6.18,1.19,8.64,1.83,2.42,.63,4.46,1.38,6.07,2.23,1.52,.8,2.66,1.75,3.4,2.84,.71,1.04,1.06,2.61,1.06,4.08,0,1.74-.4,3.21-1.22,4.5-.85,1.34-2.04,2.5-3.56,3.46-1.56,.99-3.44,1.74-5.59,2.24-2.19,.51-4.58,.77-7.12,.77-2.99,0-5.93-.3-8.74-.88-2.83-.59-5.54-1.38-8.05-2.34-2.51-.97-4.87-2.11-7.02-3.4-1.81-1.08-3.45-2.22-4.91-3.38,0,0,0,.01,0,.02-.85-.67-2.08-.63-2.87,.16-.11,.11-.2,.22-.28,.34,0,0,0,0,0,0l-8.97,14.87s0,0,0,0c-.5,.83-.4,1.93,.32,2.64,.12,.12,.24,.21,.38,.3,2.4,1.96,5.06,3.75,7.95,5.28,3.2,1.7,6.6,3.13,10.11,4.26,3.5,1.13,7.17,1.98,10.88,2.55,3.71,.56,7.45,.85,11.11,.85,5.2,0,10.26-.7,15.03-2.08,4.81-1.39,9.12-3.52,12.82-6.33,3.73-2.84,6.75-6.45,8.96-10.74,2.22-4.32,3.34-9.45,3.34-15.26,0-4.59-.83-8.65-2.48-12.07Z" />
</g>
</svg>
</a>
</div>
</div>
<div>
<div class="hs2-header__content" id="content-header">
<div class="hs2-header__menu">
<button class="hs2-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
</div>
<div class="hs2-header__search">
<button class="hs2-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<div class="hs2-header__search-wrap" id="wrap-search">
<form class="hs2-header__search-form" id="search" action="https://www.hs2.org.uk/search/" method="get" role="search">
<label class="hs2-u-visually-hidden" for="search-field">Search the HS2 website</label>
<input class="hs2-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
<button class="hs2-search__submit" type="submit">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<button class="hs2-search__close" id="close-search">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="hs2-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="hs2-width-container app-width-container">
<p class="hs2-header__navigation-title">
<span id="label-navigation">Menu</span>
<button class="hs2-header__navigation-close" id="close-menu">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="hs2-header__navigation-list">
<li class="hs2-header__navigation-item hs2-header__navigation-item--for-mobile">
<a class="hs2-header__navigation-link" href="/">
Home
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
What is HS2
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
The route
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Why HS2
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Building HS2
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
In your area
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Supply chain
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Jobs and skills
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
About us
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
</ul>
</div>
</nav>
</header>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name showNav | Type boolean | Required true | Description Set to `true` to show the navigation links in the header. |
| Name showSearch | Type boolean | Required true | Description Set to `true` to show the site search input form. |
| Name homeHref | Type string | Required No | Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/" |
| Name ariaLabel | Type string | Required No | Description Aria label for the logo href. Defaults to "HS2 homepage". |
| Name organisation | Type object | Required false | Description Settings for header with organisational logo. |
| Name organisation{}.name | Type string | Required false | Description Organisation name value. |
| Name organisation{}.descriptor | Type string | Required false | Description Organisation descriptor. |
| Name organisation{}.logoURL | Type string | Required true | Description Organisation logo if using a static asset, such as PNG, is preferred. |
| Name primaryLinks | Type array | Required false | Description Array of navigation links for use in the header. |
| Name primaryLinks[].url | Type string | Required true | Description The href of a navigation item in the header. |
| Name primaryLinks[].label | Type string | Required false | Description The label of a navigation item in the header. |
| Name transactional | Type string | Required No | Description Set to `true` if this is a transactional header (with smaller logo). |
| Name transactionalService | Type object | Required false | Description Settings for transactional service header. |
| Name transactionalService{}.name | Type string | Required false | Description Transactional service name value. |
| Name transactionalService{}.href | Type string | Required false | Description The href of the transactional header name. |
| Name transactionalService{}.longName | Type boolean | Required false | Description Set this to `true` if the transactional service name is longer than 22 characters. |
| Name searchAction | Type string | Required No | Description Custom search action endpoint. |
| Name searchInputName | Type string | Required No | Description The name for the search field. Defaults to "q" |
| Name classes | Type string | Required false | Description Classes to add to the header container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the header container. |
Copy default header code
Close default header code
{% from 'header/macro.njk' import header %}
{{ header({
"showNav": "true",
"showSearch": "true",
"primaryLinks": [
{
"url" : "#",
"label" : "What is HS2"
},
{
'url' : '#',
'label' : 'The route'
},
{
'url' : '#',
'label' : 'Why HS2'
},
{
'url' : '#',
'label' : 'Building HS2'
},
{
'url' : '#',
'label' : 'In your area'
},
{
'url' : '#',
'label' : 'Supply chain'
},
{
'url' : '#',
'label' : 'Jobs and skills'
},
{
'url' : '#',
'label' : 'About us'
}
]
})
}}We have 3 versions of the header for HS2 services.
- the default header
- the service header
- the transactional header
We also have an organisational header for other HS2 organisations.
When to use the header
Use one of the HS2 headers at the top of every page if your service is on the hs2 domain.
Use the HS2 default, service or transactional header at the top of every page if your service is on the hs2 domain.
Use the organisational header if your service is on another domain.
When not to use the header
Do not use 1 of the HS2 headers if your service is on another domain.
How to use
Default header
Use the default header on the HS2 website.
Open this default header example in new window
Copy default header code
Close default header code
<header class="hs2-header" role="banner">
<div class="hs2-width-container hs2-header__container app-width-container">
<div class="header-wrapper">
<div class="align-center">
<div class="hs2-header__logo"><a class="hs2-header__link" href="/" aria-label="hs2 homepage">
<svg class="hs2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.04 107.9" height="20" width="45">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #1E3475
}
</style>
</defs>
<g id="hs2-logo">
<g>
<path class="cls-1 " d="M93.56,2.96V42.7H21.38V2.96c0-1.13-.91-2.04-2.04-2.04H2.04C.91,.92,0,1.83,0,2.96V104.52c0,1.13,.91,2.04,2.04,2.04H19.34c1.13,0,2.04-.91,2.04-2.04v-40.43H93.56v40.43c0,1.13,.91,2.04,2.04,2.04h17.3c1.13,0,2.04-.91,2.04-2.04V2.96c0-1.13-.91-2.04-2.04-2.04h-17.3c-1.13,0-2.04,.91-2.04,2.04Z" />
<path class="cls-1 " d="M230.47,28.67l-8.17-15.14c-.45-.83-.26-1.85,.43-2.49,1.83-1.71,3.97-3.31,6.34-4.79,2.89-1.8,6.26-3.31,10-4.48,3.77-1.18,8.12-1.77,12.94-1.77,5.42,0,10.38,.84,14.74,2.49,4.38,1.66,8.16,4.03,11.23,7.03,3.08,3.01,5.48,6.68,7.12,10.89,1.64,4.2,2.47,8.86,2.47,13.87,0,3.27-.39,6.33-1.17,9.11-.77,2.77-1.84,5.41-3.18,7.86-1.33,2.44-2.93,4.82-4.75,7.09-1.79,2.23-3.76,4.47-5.84,6.68l-19.49,20.5h34.85c1.13,0,2.04,.91,2.04,2.04v16.98c0,1.13-.91,2.04-2.04,2.04h-65.26c-1.13,0-2.04-.91-2.04-2.04v-13.67c0-.97,.38-1.91,1.05-2.61l35.05-36.29c2.64-2.67,4.65-5.39,5.98-8.1,1.3-2.65,1.96-5.51,1.96-8.51,0-2.06-.34-3.95-1.02-5.64-.68-1.68-1.64-3.16-2.86-4.39-1.22-1.23-2.71-2.2-4.43-2.88-1.74-.69-3.71-1.04-5.85-1.04-2.27,0-4.34,.29-6.15,.85-1.84,.57-3.55,1.35-5.08,2.31-1.55,.97-2.97,2.15-4.33,3.41-.49,.45-.95,.86-1.39,1.24-.99,.86-2.52,.59-3.14-.56Z" />
<path class="cls-1 " d="M208.06,61.42c-1.64-3.39-3.91-6.32-6.75-8.71-2.81-2.35-6.16-4.28-9.96-5.72-3.75-1.42-7.83-2.52-12.14-3.25l-5.38-.94c-2.81-.48-5.43-1.02-7.8-1.62-2.31-.58-4.32-1.3-5.98-2.13-1.57-.78-2.8-1.75-3.65-2.88-.8-1.05-1.19-2.32-1.19-3.87,0-1.7,.38-3.16,1.17-4.46,.8-1.33,1.94-2.47,3.38-3.41,1.49-.97,3.31-1.72,5.39-2.24,2.12-.53,4.5-.8,7.06-.8,5.05,0,9.81,.81,14.15,2.4,4.04,1.48,7.83,3.35,11.32,5.52,0,0,.01-.01,.01-.02,.33,.21,.72,.33,1.14,.33,.84,0,1.57-.49,1.92-1.19,0,0,0,0,0,0l8.05-14.86s0,0,0,0c.19-.32,.3-.69,.3-1.09,0-.79-.43-1.47-1.06-1.85-2.78-1.72-5.56-3.25-8.27-4.53-2.96-1.4-5.98-2.56-8.97-3.44-2.98-.88-6.08-1.54-9.21-1.96-3.12-.42-6.42-.63-9.8-.63-5.16,0-10.14,.71-14.81,2.12-4.69,1.41-8.88,3.53-12.45,6.3-3.6,2.79-6.51,6.33-8.64,10.52-2.15,4.22-3.24,9.13-3.24,14.6,0,4.77,.77,8.62,2.29,12.11,1.52,3.5,3.66,6.5,6.37,8.91,2.68,2.38,5.88,4.33,9.53,5.78,3.59,1.43,7.57,2.52,11.86,3.26l6.04,1.02c3.27,.57,6.18,1.19,8.64,1.83,2.42,.63,4.46,1.38,6.07,2.23,1.52,.8,2.66,1.75,3.4,2.84,.71,1.04,1.06,2.61,1.06,4.08,0,1.74-.4,3.21-1.22,4.5-.85,1.34-2.04,2.5-3.56,3.46-1.56,.99-3.44,1.74-5.59,2.24-2.19,.51-4.58,.77-7.12,.77-2.99,0-5.93-.3-8.74-.88-2.83-.59-5.54-1.38-8.05-2.34-2.51-.97-4.87-2.11-7.02-3.4-1.81-1.08-3.45-2.22-4.91-3.38,0,0,0,.01,0,.02-.85-.67-2.08-.63-2.87,.16-.11,.11-.2,.22-.28,.34,0,0,0,0,0,0l-8.97,14.87s0,0,0,0c-.5,.83-.4,1.93,.32,2.64,.12,.12,.24,.21,.38,.3,2.4,1.96,5.06,3.75,7.95,5.28,3.2,1.7,6.6,3.13,10.11,4.26,3.5,1.13,7.17,1.98,10.88,2.55,3.71,.56,7.45,.85,11.11,.85,5.2,0,10.26-.7,15.03-2.08,4.81-1.39,9.12-3.52,12.82-6.33,3.73-2.84,6.75-6.45,8.96-10.74,2.22-4.32,3.34-9.45,3.34-15.26,0-4.59-.83-8.65-2.48-12.07Z" />
</g>
</svg>
</a>
</div>
</div>
<div>
<div class="hs2-header__content" id="content-header">
<div class="hs2-header__menu">
<button class="hs2-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
</div>
<div class="hs2-header__search">
<button class="hs2-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<div class="hs2-header__search-wrap" id="wrap-search">
<form class="hs2-header__search-form" id="search" action="https://www.hs2.org.uk/search/" method="get" role="search">
<label class="hs2-u-visually-hidden" for="search-field">Search the HS2 website</label>
<input class="hs2-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
<button class="hs2-search__submit" type="submit">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<button class="hs2-search__close" id="close-search">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="hs2-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="hs2-width-container app-width-container">
<p class="hs2-header__navigation-title">
<span id="label-navigation">Menu</span>
<button class="hs2-header__navigation-close" id="close-menu">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="hs2-header__navigation-list">
<li class="hs2-header__navigation-item hs2-header__navigation-item--for-mobile">
<a class="hs2-header__navigation-link" href="/">
Home
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
What is HS2
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
The route
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Why HS2
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Building HS2
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
In your area
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Supply chain
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Jobs and skills
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
About us
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
</ul>
</div>
</nav>
</header>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name showNav | Type boolean | Required true | Description Set to `true` to show the navigation links in the header. |
| Name showSearch | Type boolean | Required true | Description Set to `true` to show the site search input form. |
| Name homeHref | Type string | Required No | Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/" |
| Name ariaLabel | Type string | Required No | Description Aria label for the logo href. Defaults to "HS2 homepage". |
| Name organisation | Type object | Required false | Description Settings for header with organisational logo. |
| Name organisation{}.name | Type string | Required false | Description Organisation name value. |
| Name organisation{}.descriptor | Type string | Required false | Description Organisation descriptor. |
| Name organisation{}.logoURL | Type string | Required true | Description Organisation logo if using a static asset, such as PNG, is preferred. |
| Name primaryLinks | Type array | Required false | Description Array of navigation links for use in the header. |
| Name primaryLinks[].url | Type string | Required true | Description The href of a navigation item in the header. |
| Name primaryLinks[].label | Type string | Required false | Description The label of a navigation item in the header. |
| Name transactional | Type string | Required No | Description Set to `true` if this is a transactional header (with smaller logo). |
| Name transactionalService | Type object | Required false | Description Settings for transactional service header. |
| Name transactionalService{}.name | Type string | Required false | Description Transactional service name value. |
| Name transactionalService{}.href | Type string | Required false | Description The href of the transactional header name. |
| Name transactionalService{}.longName | Type boolean | Required false | Description Set this to `true` if the transactional service name is longer than 22 characters. |
| Name searchAction | Type string | Required No | Description Custom search action endpoint. |
| Name searchInputName | Type string | Required No | Description The name for the search field. Defaults to "q" |
| Name classes | Type string | Required false | Description Classes to add to the header container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the header container. |
Copy default header code
Close default header code
{% from 'header/macro.njk' import header %}
{{ header({
"showNav": "true",
"showSearch": "true",
"primaryLinks": [
{
"url" : "#",
"label" : "What is HS2"
},
{
'url' : '#',
'label' : 'The route'
},
{
'url' : '#',
'label' : 'Why HS2'
},
{
'url' : '#',
'label' : 'Building HS2'
},
{
'url' : '#',
'label' : 'In your area'
},
{
'url' : '#',
'label' : 'Supply chain'
},
{
'url' : '#',
'label' : 'Jobs and skills'
},
{
'url' : '#',
'label' : 'About us'
}
]
})
}}Service header
Use the service header if your service is on the HS2 website.
Open this service header example in new window
Copy service header code
Close service header code
<header class="hs2-header" role="banner">
<div class="hs2-width-container hs2-header__container app-width-container">
<div class="header-wrapper">
<div class="align-center">
<div class="hs2-header__logo"><a class="hs2-header__link hs2-header__link--service " href="/" aria-label="hs2 homepage">
<svg class="hs2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.04 107.9" height="20" width="45">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #1E3475
}
</style>
</defs>
<g id="hs2-logo">
<g>
<path class="cls-1 " d="M93.56,2.96V42.7H21.38V2.96c0-1.13-.91-2.04-2.04-2.04H2.04C.91,.92,0,1.83,0,2.96V104.52c0,1.13,.91,2.04,2.04,2.04H19.34c1.13,0,2.04-.91,2.04-2.04v-40.43H93.56v40.43c0,1.13,.91,2.04,2.04,2.04h17.3c1.13,0,2.04-.91,2.04-2.04V2.96c0-1.13-.91-2.04-2.04-2.04h-17.3c-1.13,0-2.04,.91-2.04,2.04Z" />
<path class="cls-1 " d="M230.47,28.67l-8.17-15.14c-.45-.83-.26-1.85,.43-2.49,1.83-1.71,3.97-3.31,6.34-4.79,2.89-1.8,6.26-3.31,10-4.48,3.77-1.18,8.12-1.77,12.94-1.77,5.42,0,10.38,.84,14.74,2.49,4.38,1.66,8.16,4.03,11.23,7.03,3.08,3.01,5.48,6.68,7.12,10.89,1.64,4.2,2.47,8.86,2.47,13.87,0,3.27-.39,6.33-1.17,9.11-.77,2.77-1.84,5.41-3.18,7.86-1.33,2.44-2.93,4.82-4.75,7.09-1.79,2.23-3.76,4.47-5.84,6.68l-19.49,20.5h34.85c1.13,0,2.04,.91,2.04,2.04v16.98c0,1.13-.91,2.04-2.04,2.04h-65.26c-1.13,0-2.04-.91-2.04-2.04v-13.67c0-.97,.38-1.91,1.05-2.61l35.05-36.29c2.64-2.67,4.65-5.39,5.98-8.1,1.3-2.65,1.96-5.51,1.96-8.51,0-2.06-.34-3.95-1.02-5.64-.68-1.68-1.64-3.16-2.86-4.39-1.22-1.23-2.71-2.2-4.43-2.88-1.74-.69-3.71-1.04-5.85-1.04-2.27,0-4.34,.29-6.15,.85-1.84,.57-3.55,1.35-5.08,2.31-1.55,.97-2.97,2.15-4.33,3.41-.49,.45-.95,.86-1.39,1.24-.99,.86-2.52,.59-3.14-.56Z" />
<path class="cls-1 " d="M208.06,61.42c-1.64-3.39-3.91-6.32-6.75-8.71-2.81-2.35-6.16-4.28-9.96-5.72-3.75-1.42-7.83-2.52-12.14-3.25l-5.38-.94c-2.81-.48-5.43-1.02-7.8-1.62-2.31-.58-4.32-1.3-5.98-2.13-1.57-.78-2.8-1.75-3.65-2.88-.8-1.05-1.19-2.32-1.19-3.87,0-1.7,.38-3.16,1.17-4.46,.8-1.33,1.94-2.47,3.38-3.41,1.49-.97,3.31-1.72,5.39-2.24,2.12-.53,4.5-.8,7.06-.8,5.05,0,9.81,.81,14.15,2.4,4.04,1.48,7.83,3.35,11.32,5.52,0,0,.01-.01,.01-.02,.33,.21,.72,.33,1.14,.33,.84,0,1.57-.49,1.92-1.19,0,0,0,0,0,0l8.05-14.86s0,0,0,0c.19-.32,.3-.69,.3-1.09,0-.79-.43-1.47-1.06-1.85-2.78-1.72-5.56-3.25-8.27-4.53-2.96-1.4-5.98-2.56-8.97-3.44-2.98-.88-6.08-1.54-9.21-1.96-3.12-.42-6.42-.63-9.8-.63-5.16,0-10.14,.71-14.81,2.12-4.69,1.41-8.88,3.53-12.45,6.3-3.6,2.79-6.51,6.33-8.64,10.52-2.15,4.22-3.24,9.13-3.24,14.6,0,4.77,.77,8.62,2.29,12.11,1.52,3.5,3.66,6.5,6.37,8.91,2.68,2.38,5.88,4.33,9.53,5.78,3.59,1.43,7.57,2.52,11.86,3.26l6.04,1.02c3.27,.57,6.18,1.19,8.64,1.83,2.42,.63,4.46,1.38,6.07,2.23,1.52,.8,2.66,1.75,3.4,2.84,.71,1.04,1.06,2.61,1.06,4.08,0,1.74-.4,3.21-1.22,4.5-.85,1.34-2.04,2.5-3.56,3.46-1.56,.99-3.44,1.74-5.59,2.24-2.19,.51-4.58,.77-7.12,.77-2.99,0-5.93-.3-8.74-.88-2.83-.59-5.54-1.38-8.05-2.34-2.51-.97-4.87-2.11-7.02-3.4-1.81-1.08-3.45-2.22-4.91-3.38,0,0,0,.01,0,.02-.85-.67-2.08-.63-2.87,.16-.11,.11-.2,.22-.28,.34,0,0,0,0,0,0l-8.97,14.87s0,0,0,0c-.5,.83-.4,1.93,.32,2.64,.12,.12,.24,.21,.38,.3,2.4,1.96,5.06,3.75,7.95,5.28,3.2,1.7,6.6,3.13,10.11,4.26,3.5,1.13,7.17,1.98,10.88,2.55,3.71,.56,7.45,.85,11.11,.85,5.2,0,10.26-.7,15.03-2.08,4.81-1.39,9.12-3.52,12.82-6.33,3.73-2.84,6.75-6.45,8.96-10.74,2.22-4.32,3.34-9.45,3.34-15.26,0-4.59-.83-8.65-2.48-12.07Z" />
</g>
</svg>
<span class="hs2-header__service-name">
Service
</span>
</a>
</div>
</div>
<div>
<div class="hs2-header__content" id="content-header">
<div class="hs2-header__menu">
<button class="hs2-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
</div>
<div class="hs2-header__search">
<button class="hs2-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<div class="hs2-header__search-wrap" id="wrap-search">
<form class="hs2-header__search-form" id="search" action="https://www.hs2.org.uk/search/" method="get" role="search">
<label class="hs2-u-visually-hidden" for="search-field">Search the HS2 website</label>
<input class="hs2-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
<button class="hs2-search__submit" type="submit">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<button class="hs2-search__close" id="close-search">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="hs2-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="hs2-width-container app-width-container">
<p class="hs2-header__navigation-title">
<span id="label-navigation">Menu</span>
<button class="hs2-header__navigation-close" id="close-menu">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="hs2-header__navigation-list">
<li class="hs2-header__navigation-item hs2-header__navigation-item--for-mobile">
<a class="hs2-header__navigation-link" href="/">
Home
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
HS2 service standard
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Design system
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Content Guidelines
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Accessibility
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Feedback
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
</ul>
</div>
</nav>
</header>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name showNav | Type boolean | Required true | Description Set to `true` to show the navigation links in the header. |
| Name showSearch | Type boolean | Required true | Description Set to `true` to show the site search input form. |
| Name homeHref | Type string | Required No | Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/" |
| Name ariaLabel | Type string | Required No | Description Aria label for the logo href. Defaults to "HS2 homepage". |
| Name organisation | Type object | Required false | Description Settings for header with organisational logo. |
| Name organisation{}.name | Type string | Required false | Description Organisation name value. |
| Name organisation{}.descriptor | Type string | Required false | Description Organisation descriptor. |
| Name organisation{}.logoURL | Type string | Required true | Description Organisation logo if using a static asset, such as PNG, is preferred. |
| Name primaryLinks | Type array | Required false | Description Array of navigation links for use in the header. |
| Name primaryLinks[].url | Type string | Required true | Description The href of a navigation item in the header. |
| Name primaryLinks[].label | Type string | Required false | Description The label of a navigation item in the header. |
| Name transactional | Type string | Required No | Description Set to `true` if this is a transactional header (with smaller logo). |
| Name transactionalService | Type object | Required false | Description Settings for transactional service header. |
| Name transactionalService{}.name | Type string | Required false | Description Transactional service name value. |
| Name transactionalService{}.href | Type string | Required false | Description The href of the transactional header name. |
| Name transactionalService{}.longName | Type boolean | Required false | Description Set this to `true` if the transactional service name is longer than 22 characters. |
| Name searchAction | Type string | Required No | Description Custom search action endpoint. |
| Name searchInputName | Type string | Required No | Description The name for the search field. Defaults to "q" |
| Name classes | Type string | Required false | Description Classes to add to the header container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the header container. |
Copy service header code
Close service header code
{% from 'header/macro.njk' import header %}
{{ header({
"service": {
"name": "Service"
},
"showNav": "true",
"showSearch": "true",
"primaryLinks": [
{
"url" : "#",
"label" : "HS2 service standard"
},
{
'url' : '#',
'label' : 'Design system'
},
{
'url' : '#',
'label' : 'Content Guidelines'
},
{
'url' : '#',
'label' : 'Accessibility'
},
{
'url' : '#',
'label' : 'Feedback'
}
]
})
}}Transactional header
Use the transactional header for transactional journeys on the HS2 website. Include the service name to help users understand which service they are using.
We have found that the full header is too distracting to be used in transactional services.
Open this transactional header example in new window
Copy transactional header code
Close transactional header code
<header class="hs2-header hs2-header--transactional" role="banner">
<div class="hs2-width-container hs2-header__container app-width-container">
<div class="header-wrapper">
<div class="align-center">
<div class="hs2-header__logo hs2-header__logo--only"><a class="hs2-header__link" href="/" aria-label="hs2 homepage">
<svg class="hs2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.04 107.9" height="20" width="45">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #1E3475
}
</style>
</defs>
<g id="hs2-logo">
<g>
<path class="cls-1 " d="M93.56,2.96V42.7H21.38V2.96c0-1.13-.91-2.04-2.04-2.04H2.04C.91,.92,0,1.83,0,2.96V104.52c0,1.13,.91,2.04,2.04,2.04H19.34c1.13,0,2.04-.91,2.04-2.04v-40.43H93.56v40.43c0,1.13,.91,2.04,2.04,2.04h17.3c1.13,0,2.04-.91,2.04-2.04V2.96c0-1.13-.91-2.04-2.04-2.04h-17.3c-1.13,0-2.04,.91-2.04,2.04Z" />
<path class="cls-1 " d="M230.47,28.67l-8.17-15.14c-.45-.83-.26-1.85,.43-2.49,1.83-1.71,3.97-3.31,6.34-4.79,2.89-1.8,6.26-3.31,10-4.48,3.77-1.18,8.12-1.77,12.94-1.77,5.42,0,10.38,.84,14.74,2.49,4.38,1.66,8.16,4.03,11.23,7.03,3.08,3.01,5.48,6.68,7.12,10.89,1.64,4.2,2.47,8.86,2.47,13.87,0,3.27-.39,6.33-1.17,9.11-.77,2.77-1.84,5.41-3.18,7.86-1.33,2.44-2.93,4.82-4.75,7.09-1.79,2.23-3.76,4.47-5.84,6.68l-19.49,20.5h34.85c1.13,0,2.04,.91,2.04,2.04v16.98c0,1.13-.91,2.04-2.04,2.04h-65.26c-1.13,0-2.04-.91-2.04-2.04v-13.67c0-.97,.38-1.91,1.05-2.61l35.05-36.29c2.64-2.67,4.65-5.39,5.98-8.1,1.3-2.65,1.96-5.51,1.96-8.51,0-2.06-.34-3.95-1.02-5.64-.68-1.68-1.64-3.16-2.86-4.39-1.22-1.23-2.71-2.2-4.43-2.88-1.74-.69-3.71-1.04-5.85-1.04-2.27,0-4.34,.29-6.15,.85-1.84,.57-3.55,1.35-5.08,2.31-1.55,.97-2.97,2.15-4.33,3.41-.49,.45-.95,.86-1.39,1.24-.99,.86-2.52,.59-3.14-.56Z" />
<path class="cls-1 " d="M208.06,61.42c-1.64-3.39-3.91-6.32-6.75-8.71-2.81-2.35-6.16-4.28-9.96-5.72-3.75-1.42-7.83-2.52-12.14-3.25l-5.38-.94c-2.81-.48-5.43-1.02-7.8-1.62-2.31-.58-4.32-1.3-5.98-2.13-1.57-.78-2.8-1.75-3.65-2.88-.8-1.05-1.19-2.32-1.19-3.87,0-1.7,.38-3.16,1.17-4.46,.8-1.33,1.94-2.47,3.38-3.41,1.49-.97,3.31-1.72,5.39-2.24,2.12-.53,4.5-.8,7.06-.8,5.05,0,9.81,.81,14.15,2.4,4.04,1.48,7.83,3.35,11.32,5.52,0,0,.01-.01,.01-.02,.33,.21,.72,.33,1.14,.33,.84,0,1.57-.49,1.92-1.19,0,0,0,0,0,0l8.05-14.86s0,0,0,0c.19-.32,.3-.69,.3-1.09,0-.79-.43-1.47-1.06-1.85-2.78-1.72-5.56-3.25-8.27-4.53-2.96-1.4-5.98-2.56-8.97-3.44-2.98-.88-6.08-1.54-9.21-1.96-3.12-.42-6.42-.63-9.8-.63-5.16,0-10.14,.71-14.81,2.12-4.69,1.41-8.88,3.53-12.45,6.3-3.6,2.79-6.51,6.33-8.64,10.52-2.15,4.22-3.24,9.13-3.24,14.6,0,4.77,.77,8.62,2.29,12.11,1.52,3.5,3.66,6.5,6.37,8.91,2.68,2.38,5.88,4.33,9.53,5.78,3.59,1.43,7.57,2.52,11.86,3.26l6.04,1.02c3.27,.57,6.18,1.19,8.64,1.83,2.42,.63,4.46,1.38,6.07,2.23,1.52,.8,2.66,1.75,3.4,2.84,.71,1.04,1.06,2.61,1.06,4.08,0,1.74-.4,3.21-1.22,4.5-.85,1.34-2.04,2.5-3.56,3.46-1.56,.99-3.44,1.74-5.59,2.24-2.19,.51-4.58,.77-7.12,.77-2.99,0-5.93-.3-8.74-.88-2.83-.59-5.54-1.38-8.05-2.34-2.51-.97-4.87-2.11-7.02-3.4-1.81-1.08-3.45-2.22-4.91-3.38,0,0,0,.01,0,.02-.85-.67-2.08-.63-2.87,.16-.11,.11-.2,.22-.28,.34,0,0,0,0,0,0l-8.97,14.87s0,0,0,0c-.5,.83-.4,1.93,.32,2.64,.12,.12,.24,.21,.38,.3,2.4,1.96,5.06,3.75,7.95,5.28,3.2,1.7,6.6,3.13,10.11,4.26,3.5,1.13,7.17,1.98,10.88,2.55,3.71,.56,7.45,.85,11.11,.85,5.2,0,10.26-.7,15.03-2.08,4.81-1.39,9.12-3.52,12.82-6.33,3.73-2.84,6.75-6.45,8.96-10.74,2.22-4.32,3.34-9.45,3.34-15.26,0-4.59-.83-8.65-2.48-12.07Z" />
</g>
</svg>
</a>
</div>
<div class="hs2-header__transactional-service-name">
<a class="hs2-header__transactional-service-name--link" href="#">Transactional service</a>
</div>
</div>
</div>
<div>
</header>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name showNav | Type boolean | Required true | Description Set to `true` to show the navigation links in the header. |
| Name showSearch | Type boolean | Required true | Description Set to `true` to show the site search input form. |
| Name homeHref | Type string | Required No | Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/" |
| Name ariaLabel | Type string | Required No | Description Aria label for the logo href. Defaults to "HS2 homepage". |
| Name organisation | Type object | Required false | Description Settings for header with organisational logo. |
| Name organisation{}.name | Type string | Required false | Description Organisation name value. |
| Name organisation{}.descriptor | Type string | Required false | Description Organisation descriptor. |
| Name organisation{}.logoURL | Type string | Required true | Description Organisation logo if using a static asset, such as PNG, is preferred. |
| Name primaryLinks | Type array | Required false | Description Array of navigation links for use in the header. |
| Name primaryLinks[].url | Type string | Required true | Description The href of a navigation item in the header. |
| Name primaryLinks[].label | Type string | Required false | Description The label of a navigation item in the header. |
| Name transactional | Type string | Required No | Description Set to `true` if this is a transactional header (with smaller logo). |
| Name transactionalService | Type object | Required false | Description Settings for transactional service header. |
| Name transactionalService{}.name | Type string | Required false | Description Transactional service name value. |
| Name transactionalService{}.href | Type string | Required false | Description The href of the transactional header name. |
| Name transactionalService{}.longName | Type boolean | Required false | Description Set this to `true` if the transactional service name is longer than 22 characters. |
| Name searchAction | Type string | Required No | Description Custom search action endpoint. |
| Name searchInputName | Type string | Required No | Description The name for the search field. Defaults to "q" |
| Name classes | Type string | Required false | Description Classes to add to the header container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the header container. |
Copy transactional header code
Close transactional header code
{% from 'header/macro.njk' import header %}
{{ header({
"transactionalService": {
"name": "Transactional service",
"href": "#"
},
"showNav": "false",
"showSearch": "false"
})
}}Organisational header
Use the organisational header if your HS2 organisation or service is not part of the HS2 website.
Open this organisational header example in new window
Copy organisational header code
Close organisational header code
<header class="hs2-header hs2-header--organisation" role="banner">
<div class="hs2-width-container hs2-header__container app-width-container">
<div class="header-wrapper">
<div class="align-center">
<div class="hs2-header__logo">
<a class="hs2-header__link" href="/" aria-label="Organisation Organisational header homepage">
<svg class="hs2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.04 107.9" height="20" width="45">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #1E3475
}
</style>
</defs>
<g id="hs2-logo">
<g>
<path class="cls-1 " d="M93.56,2.96V42.7H21.38V2.96c0-1.13-.91-2.04-2.04-2.04H2.04C.91,.92,0,1.83,0,2.96V104.52c0,1.13,.91,2.04,2.04,2.04H19.34c1.13,0,2.04-.91,2.04-2.04v-40.43H93.56v40.43c0,1.13,.91,2.04,2.04,2.04h17.3c1.13,0,2.04-.91,2.04-2.04V2.96c0-1.13-.91-2.04-2.04-2.04h-17.3c-1.13,0-2.04,.91-2.04,2.04Z" />
<path class="cls-1 " d="M230.47,28.67l-8.17-15.14c-.45-.83-.26-1.85,.43-2.49,1.83-1.71,3.97-3.31,6.34-4.79,2.89-1.8,6.26-3.31,10-4.48,3.77-1.18,8.12-1.77,12.94-1.77,5.42,0,10.38,.84,14.74,2.49,4.38,1.66,8.16,4.03,11.23,7.03,3.08,3.01,5.48,6.68,7.12,10.89,1.64,4.2,2.47,8.86,2.47,13.87,0,3.27-.39,6.33-1.17,9.11-.77,2.77-1.84,5.41-3.18,7.86-1.33,2.44-2.93,4.82-4.75,7.09-1.79,2.23-3.76,4.47-5.84,6.68l-19.49,20.5h34.85c1.13,0,2.04,.91,2.04,2.04v16.98c0,1.13-.91,2.04-2.04,2.04h-65.26c-1.13,0-2.04-.91-2.04-2.04v-13.67c0-.97,.38-1.91,1.05-2.61l35.05-36.29c2.64-2.67,4.65-5.39,5.98-8.1,1.3-2.65,1.96-5.51,1.96-8.51,0-2.06-.34-3.95-1.02-5.64-.68-1.68-1.64-3.16-2.86-4.39-1.22-1.23-2.71-2.2-4.43-2.88-1.74-.69-3.71-1.04-5.85-1.04-2.27,0-4.34,.29-6.15,.85-1.84,.57-3.55,1.35-5.08,2.31-1.55,.97-2.97,2.15-4.33,3.41-.49,.45-.95,.86-1.39,1.24-.99,.86-2.52,.59-3.14-.56Z" />
<path class="cls-1 " d="M208.06,61.42c-1.64-3.39-3.91-6.32-6.75-8.71-2.81-2.35-6.16-4.28-9.96-5.72-3.75-1.42-7.83-2.52-12.14-3.25l-5.38-.94c-2.81-.48-5.43-1.02-7.8-1.62-2.31-.58-4.32-1.3-5.98-2.13-1.57-.78-2.8-1.75-3.65-2.88-.8-1.05-1.19-2.32-1.19-3.87,0-1.7,.38-3.16,1.17-4.46,.8-1.33,1.94-2.47,3.38-3.41,1.49-.97,3.31-1.72,5.39-2.24,2.12-.53,4.5-.8,7.06-.8,5.05,0,9.81,.81,14.15,2.4,4.04,1.48,7.83,3.35,11.32,5.52,0,0,.01-.01,.01-.02,.33,.21,.72,.33,1.14,.33,.84,0,1.57-.49,1.92-1.19,0,0,0,0,0,0l8.05-14.86s0,0,0,0c.19-.32,.3-.69,.3-1.09,0-.79-.43-1.47-1.06-1.85-2.78-1.72-5.56-3.25-8.27-4.53-2.96-1.4-5.98-2.56-8.97-3.44-2.98-.88-6.08-1.54-9.21-1.96-3.12-.42-6.42-.63-9.8-.63-5.16,0-10.14,.71-14.81,2.12-4.69,1.41-8.88,3.53-12.45,6.3-3.6,2.79-6.51,6.33-8.64,10.52-2.15,4.22-3.24,9.13-3.24,14.6,0,4.77,.77,8.62,2.29,12.11,1.52,3.5,3.66,6.5,6.37,8.91,2.68,2.38,5.88,4.33,9.53,5.78,3.59,1.43,7.57,2.52,11.86,3.26l6.04,1.02c3.27,.57,6.18,1.19,8.64,1.83,2.42,.63,4.46,1.38,6.07,2.23,1.52,.8,2.66,1.75,3.4,2.84,.71,1.04,1.06,2.61,1.06,4.08,0,1.74-.4,3.21-1.22,4.5-.85,1.34-2.04,2.5-3.56,3.46-1.56,.99-3.44,1.74-5.59,2.24-2.19,.51-4.58,.77-7.12,.77-2.99,0-5.93-.3-8.74-.88-2.83-.59-5.54-1.38-8.05-2.34-2.51-.97-4.87-2.11-7.02-3.4-1.81-1.08-3.45-2.22-4.91-3.38,0,0,0,.01,0,.02-.85-.67-2.08-.63-2.87,.16-.11,.11-.2,.22-.28,.34,0,0,0,0,0,0l-8.97,14.87s0,0,0,0c-.5,.83-.4,1.93,.32,2.64,.12,.12,.24,.21,.38,.3,2.4,1.96,5.06,3.75,7.95,5.28,3.2,1.7,6.6,3.13,10.11,4.26,3.5,1.13,7.17,1.98,10.88,2.55,3.71,.56,7.45,.85,11.11,.85,5.2,0,10.26-.7,15.03-2.08,4.81-1.39,9.12-3.52,12.82-6.33,3.73-2.84,6.75-6.45,8.96-10.74,2.22-4.32,3.34-9.45,3.34-15.26,0-4.59-.83-8.65-2.48-12.07Z" />
</g>
</svg>
<span class="hs2-organisation-name">Organisation
</span>
<span class="hs2-organisation-descriptor">Organisational header</span>
</a>
</div>
</div>
<div>
<div class="hs2-header__content" id="content-header">
<div class="hs2-header__menu">
<button class="hs2-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
</div>
<div class="hs2-header__search">
<button class="hs2-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<div class="hs2-header__search-wrap" id="wrap-search">
<form class="hs2-header__search-form" id="search" action="https://www.hs2.org.uk/search/" method="get" role="search">
<label class="hs2-u-visually-hidden" for="search-field">Search the HS2 website</label>
<input class="hs2-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
<button class="hs2-search__submit" type="submit">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<button class="hs2-search__close" id="close-search">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="hs2-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="hs2-width-container app-width-container">
<p class="hs2-header__navigation-title">
<span id="label-navigation">Menu</span>
<button class="hs2-header__navigation-close" id="close-menu">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="hs2-header__navigation-list">
<li class="hs2-header__navigation-item hs2-header__navigation-item--for-mobile">
<a class="hs2-header__navigation-link" href="/">
Home
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link one
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link two
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link three
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link four
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link five
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
</ul>
</div>
</nav>
</header>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name showNav | Type boolean | Required true | Description Set to `true` to show the navigation links in the header. |
| Name showSearch | Type boolean | Required true | Description Set to `true` to show the site search input form. |
| Name homeHref | Type string | Required No | Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/" |
| Name ariaLabel | Type string | Required No | Description Aria label for the logo href. Defaults to "HS2 homepage". |
| Name organisation | Type object | Required false | Description Settings for header with organisational logo. |
| Name organisation{}.name | Type string | Required false | Description Organisation name value. |
| Name organisation{}.descriptor | Type string | Required false | Description Organisation descriptor. |
| Name organisation{}.logoURL | Type string | Required true | Description Organisation logo if using a static asset, such as PNG, is preferred. |
| Name primaryLinks | Type array | Required false | Description Array of navigation links for use in the header. |
| Name primaryLinks[].url | Type string | Required true | Description The href of a navigation item in the header. |
| Name primaryLinks[].label | Type string | Required false | Description The label of a navigation item in the header. |
| Name transactional | Type string | Required No | Description Set to `true` if this is a transactional header (with smaller logo). |
| Name transactionalService | Type object | Required false | Description Settings for transactional service header. |
| Name transactionalService{}.name | Type string | Required false | Description Transactional service name value. |
| Name transactionalService{}.href | Type string | Required false | Description The href of the transactional header name. |
| Name transactionalService{}.longName | Type boolean | Required false | Description Set this to `true` if the transactional service name is longer than 22 characters. |
| Name searchAction | Type string | Required No | Description Custom search action endpoint. |
| Name searchInputName | Type string | Required No | Description The name for the search field. Defaults to "q" |
| Name classes | Type string | Required false | Description Classes to add to the header container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the header container. |
Copy organisational header code
Close organisational header code
{% from 'header/macro.njk' import header %}
{{ header({
"showNav": "true",
"showSearch": "true",
"organisation": {
"name": "Organisation",
"split": "",
"descriptor": "Organisational header"
},
"primaryLinks": [
{
"url" : "#",
"label" : "Link one"
},
{
'url' : '#',
'label' : 'Link two'
},
{
'url' : '#',
'label' : 'Link three'
},
{
'url' : '#',
'label' : 'Link four'
},
{
'url' : '#',
'label' : 'Link five'
}
]
})
}}White variant
Open this organisational white header example in new window
Copy organisational white header code
Close organisational white header code
<header class="hs2-header hs2-header--organisation hs2-header--white" role="banner">
<div class="hs2-width-container hs2-header__container app-width-container">
<div class="header-wrapper">
<div class="align-center">
<div class="hs2-header__logo">
<a class="hs2-header__link" href="/" aria-label="Organisation Organisational header homepage">
<svg class="hs2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.04 107.9" height="20" width="45">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #1E3475
}
</style>
</defs>
<g id="hs2-logo">
<g>
<path class=" cls-2" d="M93.56,2.96V42.7H21.38V2.96c0-1.13-.91-2.04-2.04-2.04H2.04C.91,.92,0,1.83,0,2.96V104.52c0,1.13,.91,2.04,2.04,2.04H19.34c1.13,0,2.04-.91,2.04-2.04v-40.43H93.56v40.43c0,1.13,.91,2.04,2.04,2.04h17.3c1.13,0,2.04-.91,2.04-2.04V2.96c0-1.13-.91-2.04-2.04-2.04h-17.3c-1.13,0-2.04,.91-2.04,2.04Z" />
<path class=" cls-2" d="M230.47,28.67l-8.17-15.14c-.45-.83-.26-1.85,.43-2.49,1.83-1.71,3.97-3.31,6.34-4.79,2.89-1.8,6.26-3.31,10-4.48,3.77-1.18,8.12-1.77,12.94-1.77,5.42,0,10.38,.84,14.74,2.49,4.38,1.66,8.16,4.03,11.23,7.03,3.08,3.01,5.48,6.68,7.12,10.89,1.64,4.2,2.47,8.86,2.47,13.87,0,3.27-.39,6.33-1.17,9.11-.77,2.77-1.84,5.41-3.18,7.86-1.33,2.44-2.93,4.82-4.75,7.09-1.79,2.23-3.76,4.47-5.84,6.68l-19.49,20.5h34.85c1.13,0,2.04,.91,2.04,2.04v16.98c0,1.13-.91,2.04-2.04,2.04h-65.26c-1.13,0-2.04-.91-2.04-2.04v-13.67c0-.97,.38-1.91,1.05-2.61l35.05-36.29c2.64-2.67,4.65-5.39,5.98-8.1,1.3-2.65,1.96-5.51,1.96-8.51,0-2.06-.34-3.95-1.02-5.64-.68-1.68-1.64-3.16-2.86-4.39-1.22-1.23-2.71-2.2-4.43-2.88-1.74-.69-3.71-1.04-5.85-1.04-2.27,0-4.34,.29-6.15,.85-1.84,.57-3.55,1.35-5.08,2.31-1.55,.97-2.97,2.15-4.33,3.41-.49,.45-.95,.86-1.39,1.24-.99,.86-2.52,.59-3.14-.56Z" />
<path class=" cls-2" d="M208.06,61.42c-1.64-3.39-3.91-6.32-6.75-8.71-2.81-2.35-6.16-4.28-9.96-5.72-3.75-1.42-7.83-2.52-12.14-3.25l-5.38-.94c-2.81-.48-5.43-1.02-7.8-1.62-2.31-.58-4.32-1.3-5.98-2.13-1.57-.78-2.8-1.75-3.65-2.88-.8-1.05-1.19-2.32-1.19-3.87,0-1.7,.38-3.16,1.17-4.46,.8-1.33,1.94-2.47,3.38-3.41,1.49-.97,3.31-1.72,5.39-2.24,2.12-.53,4.5-.8,7.06-.8,5.05,0,9.81,.81,14.15,2.4,4.04,1.48,7.83,3.35,11.32,5.52,0,0,.01-.01,.01-.02,.33,.21,.72,.33,1.14,.33,.84,0,1.57-.49,1.92-1.19,0,0,0,0,0,0l8.05-14.86s0,0,0,0c.19-.32,.3-.69,.3-1.09,0-.79-.43-1.47-1.06-1.85-2.78-1.72-5.56-3.25-8.27-4.53-2.96-1.4-5.98-2.56-8.97-3.44-2.98-.88-6.08-1.54-9.21-1.96-3.12-.42-6.42-.63-9.8-.63-5.16,0-10.14,.71-14.81,2.12-4.69,1.41-8.88,3.53-12.45,6.3-3.6,2.79-6.51,6.33-8.64,10.52-2.15,4.22-3.24,9.13-3.24,14.6,0,4.77,.77,8.62,2.29,12.11,1.52,3.5,3.66,6.5,6.37,8.91,2.68,2.38,5.88,4.33,9.53,5.78,3.59,1.43,7.57,2.52,11.86,3.26l6.04,1.02c3.27,.57,6.18,1.19,8.64,1.83,2.42,.63,4.46,1.38,6.07,2.23,1.52,.8,2.66,1.75,3.4,2.84,.71,1.04,1.06,2.61,1.06,4.08,0,1.74-.4,3.21-1.22,4.5-.85,1.34-2.04,2.5-3.56,3.46-1.56,.99-3.44,1.74-5.59,2.24-2.19,.51-4.58,.77-7.12,.77-2.99,0-5.93-.3-8.74-.88-2.83-.59-5.54-1.38-8.05-2.34-2.51-.97-4.87-2.11-7.02-3.4-1.81-1.08-3.45-2.22-4.91-3.38,0,0,0,.01,0,.02-.85-.67-2.08-.63-2.87,.16-.11,.11-.2,.22-.28,.34,0,0,0,0,0,0l-8.97,14.87s0,0,0,0c-.5,.83-.4,1.93,.32,2.64,.12,.12,.24,.21,.38,.3,2.4,1.96,5.06,3.75,7.95,5.28,3.2,1.7,6.6,3.13,10.11,4.26,3.5,1.13,7.17,1.98,10.88,2.55,3.71,.56,7.45,.85,11.11,.85,5.2,0,10.26-.7,15.03-2.08,4.81-1.39,9.12-3.52,12.82-6.33,3.73-2.84,6.75-6.45,8.96-10.74,2.22-4.32,3.34-9.45,3.34-15.26,0-4.59-.83-8.65-2.48-12.07Z" />
</g>
</svg>
<span class="hs2-organisation-name">Organisation
</span>
<span class="hs2-organisation-descriptor">Organisational header</span>
</a>
</div>
</div>
<div>
<div class="hs2-header__content" id="content-header">
<div class="hs2-header__menu">
<button class="hs2-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
</div>
<div class="hs2-header__search">
<button class="hs2-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<div class="hs2-header__search-wrap" id="wrap-search">
<form class="hs2-header__search-form" id="search" action="https://www.hs2.org.uk/search/" method="get" role="search">
<label class="hs2-u-visually-hidden" for="search-field">Search the HS2 website</label>
<input class="hs2-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
<button class="hs2-search__submit" type="submit">
<svg class="hs2-icon hs2-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="hs2-u-visually-hidden">Search</span>
</button>
<button class="hs2-search__close" id="close-search">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="hs2-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="hs2-width-container app-width-container">
<p class="hs2-header__navigation-title">
<span id="label-navigation">Menu</span>
<button class="hs2-header__navigation-close" id="close-menu">
<svg class="hs2-icon hs2-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="hs2-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="hs2-header__navigation-list">
<li class="hs2-header__navigation-item hs2-header__navigation-item--for-mobile">
<a class="hs2-header__navigation-link" href="/">
Home
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link one
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link two
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link three
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link four
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
<li class="hs2-header__navigation-item">
<a class="hs2-header__navigation-link" href="#">
Link five
<svg class="hs2-icon hs2-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</li>
</ul>
</div>
</nav>
</header>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name showNav | Type boolean | Required true | Description Set to `true` to show the navigation links in the header. |
| Name showSearch | Type boolean | Required true | Description Set to `true` to show the site search input form. |
| Name homeHref | Type string | Required No | Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/" |
| Name ariaLabel | Type string | Required No | Description Aria label for the logo href. Defaults to "HS2 homepage". |
| Name organisation | Type object | Required false | Description Settings for header with organisational logo. |
| Name organisation{}.name | Type string | Required false | Description Organisation name value. |
| Name organisation{}.descriptor | Type string | Required false | Description Organisation descriptor. |
| Name organisation{}.logoURL | Type string | Required true | Description Organisation logo if using a static asset, such as PNG, is preferred. |
| Name primaryLinks | Type array | Required false | Description Array of navigation links for use in the header. |
| Name primaryLinks[].url | Type string | Required true | Description The href of a navigation item in the header. |
| Name primaryLinks[].label | Type string | Required false | Description The label of a navigation item in the header. |
| Name transactional | Type string | Required No | Description Set to `true` if this is a transactional header (with smaller logo). |
| Name transactionalService | Type object | Required false | Description Settings for transactional service header. |
| Name transactionalService{}.name | Type string | Required false | Description Transactional service name value. |
| Name transactionalService{}.href | Type string | Required false | Description The href of the transactional header name. |
| Name transactionalService{}.longName | Type boolean | Required false | Description Set this to `true` if the transactional service name is longer than 22 characters. |
| Name searchAction | Type string | Required No | Description Custom search action endpoint. |
| Name searchInputName | Type string | Required No | Description The name for the search field. Defaults to "q" |
| Name classes | Type string | Required false | Description Classes to add to the header container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the header container. |
Copy organisational white header code
Close organisational white header code
{% from 'header/macro.njk' import header %}
{{ header({
"showNav": "true",
"showSearch": "true",
"classes": "hs2-header--white",
"organisation": {
"name": "Organisation",
"split": "",
"descriptor": "Organisational header"
},
"primaryLinks": [
{
"url" : "#",
"label" : "Link one"
},
{
'url' : '#',
'label' : 'Link two'
},
{
'url' : '#',
'label' : 'Link three'
},
{
'url' : '#',
'label' : 'Link four'
},
{
'url' : '#',
'label' : 'Link five'
}
]
})
}}The organisational logo is an SVG and you can change the organisation name and descriptor in the code. Longer organisation names should be split onto 2 lines.
You can also use a static asset, such as a PNG file.
<a class="hs2-header__link" href="/" aria-label="Anyplace Anytown Anywhere HS2 Foundation Trust homepage">
<img class="hs2-org-logo" src="/path-to-assets/logo.png" alt="">
</a>