Scaffolding
Header
Site header with the ability to enable / disable the following:
- Navigation
- Search
- Header logos
Example
Macro
{{ customHeader({
"showNav": "true",
"showSearch": "true",
"showLogos": "true",
"heeHref": "http://hee.nhs.uk/",
"classes": "nhsuk-header--white",
"organisation": {
"name": "Health Education England",
"split": "",
"descriptor": "Hub Name"
},
"logos": [
{
"href": "https://www.nimdta.gov.uk/",
"label": "Northern Ireland Medical and Dental Training Agency Website (Opens in New Window)",
"imgSrc": "/assets/images/logos/nimdta-logo.png",
"imgAlt": "Logo for Northern Ireland Medical and Dental Training Agency"
},
{
"href": "https://www.nes.scot.nhs.uk/",
"label": "NHS Education for Scotland Website (Opens in New Window)",
"imgSrc": "/assets/images/logos/nhs-scotland-logo.png",
"imgAlt": "Logo for NHS Education for Scotland"
},
{
"href": "https://heiw.nhs.wales/",
"label": "Health Education and Improvement Wales Website (Opens in New Window)",
"imgSrc": "/assets/images/logos/heiw-logo.png",
"imgAlt": "Logo for Health Education and Improvement Wales"
}
],
"primaryLinks": [
{
url: "/templates",
label: "Templates"
},
{
url: "/components",
label: "Components",
children: [
{
url: "/scaffolding",
label: "Scaffolding"
},
{
url: "/components/furniture",
label: "Furniture"
},
{
url: "/components/contentblocks",
label: "Content Blocks"
},
{
url: "/components/rightblocks",
label: "Right Blocks"
},
{
url: "/components/featureblocks",
label: "Feature Blocks"
}
]
}
]
})
}}HTML
<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" role="banner">
<div class="nhsuk-width-container nhsuk-header__container">
<div class="nhsuk-header__multilogo">
<span class="nhsuk-header__logo nhsuk-header__logo-home">
<a class="nhsuk-header__link" href="http://hee.nhs.uk/" aria-label="Health Education England Hub Name homepage">
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="presentation" focusable="false" viewBox="0 0 40 16">
<path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
<path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
<image src="https://assets.nhs.uk/assets/images/nhs-logo.png" xlink:href=""></image>
</svg>
<span class="nhsuk-organisation-name">Health Education England</span>
</a>
<a class="nhsuk-header__link" href="/" aria-label="Health Education England Hub Name homepage">
<span class="nhsuk-organisation-descriptor">Hub Name</span>
</a>
</span>
<span class="nhsuk-header__logo">
<a class="nhsuk-header__link" href="https://www.nimdta.gov.uk/" aria-label="Northern Ireland Medical and Dental Training Agency Website (Opens in New Window)">
<img src="/assets/images/logos/nimdta-logo.png" alt="Logo for Northern Ireland Medical and Dental Training Agency">
</a>
</span>
<span class="nhsuk-header__logo">
<a class="nhsuk-header__link" href="https://www.nes.scot.nhs.uk/" aria-label="NHS Education for Scotland Website (Opens in New Window)">
<img src="/assets/images/logos/nhs-scotland-logo.png" alt="Logo for NHS Education for Scotland">
</a>
</span>
<span class="nhsuk-header__logo">
<a class="nhsuk-header__link" href="https://heiw.nhs.wales/" aria-label="Health Education and Improvement Wales Website (Opens in New Window)">
<img src="/assets/images/logos/heiw-logo.png" alt="Logo for Health Education and Improvement Wales">
</a>
</span>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__menu">
<button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-label="Open menu">Menu</button>
</div>
<div class="nhsuk-header__search">
<button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<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="nhsuk-u-visually-hidden">Search</span>
</button>
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<div class="autocomplete-container" id="autocomplete-container">
<div class="autocomplete__wrapper">
</div>
<div class="autocomplete__wrapper"><div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"><div id="search-field__status--A" role="status" aria-atomic="true" aria-live="polite"></div><div id="search-field__status--B" role="status" aria-atomic="true" aria-live="polite"></div></div><input aria-expanded="false" aria-owns="search-field__listbox" aria-autocomplete="list" aria-describedby="search-field__assistiveHint" autocomplete="off" class="autocomplete__input autocomplete__input--default" id="search-field" name="q" placeholder="Search" type="text" role="combobox"><ul class="autocomplete__menu autocomplete__menu--inline autocomplete__menu--hidden" id="search-field__listbox" role="listbox"></ul><span id="search-field__assistiveHint" style="display: none;">When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.</span></div></div>
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<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="nhsuk-u-visually-hidden">Search</span>
</button>
<button class="nhsuk-search__close" id="close-search">
<svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<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="nhsuk-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
</div>
</div>
<nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="nhsuk-width-container">
<p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
<button class="nhsuk-header__navigation-close" id="close-menu">
<svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<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="nhsuk-u-visually-hidden">Close menu</span>
</button>
</p>
<ul class="nhsuk-header__navigation-list">
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
<a class="nhsuk-header__navigation-link" href="/"> Home </a>
</li>
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="/templates"> Templates </a>
</li>
<li class="nhsuk-header__navigation-item nhsuk-subnav" aria-haspopup="true" aria-expanded="false">
<a class="nhsuk-header__navigation-link" href="#">
<div class="nhsuk-subnav__wrapper">
<span class="nhsuk-header__link-text">Components</span>
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<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>
</div>
</a>
<ul class="nhsuk-subnav__list">
<li class="nhsuk-subnav__list-item">
<a class="nhsuk-subnav__list-link" href="/components"> Components </a>
</li>
<li class="nhsuk-subnav__list-item">
<a class="nhsuk-subnav__list-link" href="/scaffolding"> Scaffolding </a>
</li>
<li class="nhsuk-subnav__list-item">
<a class="nhsuk-subnav__list-link" href="/components/furniture"> Furniture </a>
</li>
<li class="nhsuk-subnav__list-item">
<a class="nhsuk-subnav__list-link" href="/components/contentblocks"> Content Blocks </a>
</li>
<li class="nhsuk-subnav__list-item">
<a class="nhsuk-subnav__list-link" href="/components/rightblocks"> Right Blocks </a>
</li>
<li class="nhsuk-subnav__list-item">
<a class="nhsuk-subnav__list-link" href="/components/featureblocks"> Feature Blocks </a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>