Header
Overview
The header component provides a consistent way to branding, navigation and key links at the top of the page. It supports 4 variants - External (default), Internal, Neutral and Basic and these can be customised with optional properties depending on the context.
Example Header Default contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Page title',
"mastheadLogoUrl": '#0',
"titleUrl": '#0'
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Page title</div>
</a>
</div>
</div>
</div>
</div>
</header>When to use this component
Use the header component on all ONS services to maintain a consistent structure, support navigation and reinforce service identity. Choose the variant that best suits your context whether that's public facing or internal.
How to use this component
Choose the variant that is appropriate for your use case by setting the variant parameter to one of the following: Internal, External, Neutral or Basic.
Some variants support extra functionality such as language toggles, search bars or menus. See the examples in the Variants section for guidance on how to apply each property
Variants
The Internal, External and Neutral variants support the same set of optional properties. The Basic variant supports a simplified set.
Internal
Use this for internal services for ONS staff.
Set the variant parameter with the value “internal”.
Example Header Internal contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Service title',
"mastheadLogoUrl": '#0',
"variants": 'internal',
"titleUrl": '#0',
"serviceLinks": {
"id": "service-links-internal",
"ariaLabel": 'Services menu',
"ariaListLabel": 'Menu',
"toggleServicesButton": {
"text": 'Account',
"ariaLabel": 'Toggle services menu'
},
"itemsList": [
{
"text": "Jacky Turner",
"iconType": 'person'
},
{
"text": "Sign out",
"url": "#0"
}
]
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header ons-header--internal">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
<div class="ons-grid__col ons-col-auto ons-u-d-no@2xs@m">
<nav class="ons-header-service-nav ons-header-service-nav--main" aria-label="Services menu">
<ul class="ons-header-service-nav__list">
<li class="ons-header-service-nav__item">
<svg class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" aria-hidden="true">
<path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
<circle cx="6" cy="3" r="3" />
</svg> Jacky Turner
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-grid__col ons-col-auto ons-u-d-no@m">
<button type="button"
class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--text-link ons-btn--text-link-inverse"
aria-label="Toggle services menu" aria-controls="service-links-internal" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Account</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav"
id="service-links-internal" aria-label="Services menu">
<ul class="ons-header-service-nav__list">
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<svg class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" aria-hidden="true">
<path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
<circle cx="6" cy="3" r="3" />
</svg> Jacky Turner
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service title</div>
</a>
</div>
</div>
</div>
</div>
</header>External (default)
Set the variant parameter with the value “external”.
Optional properties
External survey with sign out button and language toggle
The external header for public-facing surveys provides a button to save and sign out.
Translated surveys also use a persistent language toggle to allow users to change language.
The signoutButton is removed from the header and displayed in the footer when the width of the viewport is below the medium breakpoint, when using the base page template.
Example Header External For Surveys contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Survey title',
"mastheadLogoUrl": '#0',
"button": {
"text": 'Save and sign out',
"url": '#0',
"iconType": 'exit',
"iconPosition": 'after'
},
"language": {
"languages": [
{
"url": '#0',
"isoCode": 'en',
"text": 'English',
"current": true
},
{
"url": '#0',
"isoCode": 'cy',
"text": 'Cymraeg',
"current": false
}
]
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
<div class="ons-grid__col ons-col-auto">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="cy">
<span class="ons-u-vh">Change language to </span> Cymraeg </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Survey title</div>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<a href="#0" role="button" class="ons-btn ons-u-d-no@2xs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg
class="ons-icon ons-u-ml-2xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" aria-hidden="true">
<path
d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z"
transform="translate(-2 -2)" />
<path
d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z"
transform="translate(-2 -2)" />
</svg></span>
</a>
</div>
</div>
</div>
</div>
</header>External with main navigation
Use this for services that require a main navigation.
When the width of the viewport is below the large breakpoint, the navigation will be hidden. A menu button is instead shown which allows the navigation menu to be open and closed.
Open this variant in a new tab to see the menu element working.
Example Header External With Navigation contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Design system',
"titleUrl": '#0',
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#home',
"itemsList": [
{
"text": 'Home',
"url": '#home'
},
{
"text": 'Guidance',
"url": '#0'
},
{
"text": 'Foundations',
"url": '#0'
},
{
"text": 'Components',
"url": '#0'
},
{
"text": 'Patterns',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main menu'
}
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24" viewBox="33 2 552 60"
aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116"
aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Design system</div>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<button type="submit"
class="ons-btn ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost"
aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper">
<div class="ons-container ons-container--gutterless@2xs@l">
<nav class="ons-navigation ons-navigation--main ons-js-navigation" id="main-nav" aria-label="Main menu"
data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#home"> Home </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Guidance </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Foundations </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Components </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Patterns </a>
</li>
</ul>
</nav>
</div>
</div>
</header>External with service links
Use this to display links in the masthead.
When the width of the viewport is below the medium breakpoint, if more than one service link is used, the links will be hidden. A menu button is instead shown which allows the menu to be opened and closed.
Example Header External With Service Links contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Page title',
"mastheadLogoUrl": '#0',
"titleUrl": '#0',
"serviceLinks": {
"id": "service-links-external",
"ariaLabel": 'Services menu',
"ariaListLabel": 'Menu',
"toggleServicesButton": {
"text": 'Menu',
"ariaLabel": 'Toggle services menu'
},
"itemsList": [
{
"text": "Help",
"url": "#0"
},
{
"text": "My Account",
"url": "#0"
},
{
"text": "Sign out",
"url": "#0"
}
]
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
<div class="ons-grid__col ons-col-auto ons-u-d-no@2xs@m">
<nav class="ons-header-service-nav ons-header-service-nav--main" aria-label="Services menu">
<ul class="ons-header-service-nav__list">
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-grid__col ons-col-auto ons-u-d-no@m">
<button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--text-link"
aria-label="Toggle services menu" aria-controls="service-links-external" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav"
id="service-links-external" aria-label="Services menu">
<ul class="ons-header-service-nav__list">
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Page title</div>
</a>
</div>
</div>
</div>
</div>
</header>External survey with description
This should be used when the service would benefit from a description which informs users of what the service provides.
It allows for text to be added below the title by adding the parameter description to the header configuration.
Adding a description to the header title: set the "description" param to the description text and set "variants" to "description".
Example Header External For Survey With Description contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"variants": 'description',
"title": 'Service title',
"titleUrl": '#0',
"mastheadLogoUrl": '#0',
"description": 'This is the description or tagline',
"button": {
"text": 'Save and sign out',
"url": '#0',
"iconType": 'exit',
"iconPosition": 'after'
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header ons-header--description">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service title</div>
</a>
<p class="ons-header__description">This is the description or tagline</p>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<a href="#0" role="button" class="ons-btn ons-u-d-no@2xs@m ons-btn--ghost ons-btn--link ons-js-submit-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg
class="ons-icon ons-u-ml-2xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" aria-hidden="true">
<path
d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z"
transform="translate(-2 -2)" />
<path
d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z"
transform="translate(-2 -2)" />
</svg></span>
</a>
</div>
</div>
</div>
</div>
</header>External with sub-navigation
Use this for services that require multiple levels of navigation.
When the width of the viewport is below the large breakpoint, a menu button is shown which allows the sub navigation menu to be open and closed.
An additional third level can also be displayed in the mobile menu. The third level would be navigation that is presented in the left-hand column of a page in desktop view but hidden on small viewports.
Open this variant in a new tab to see the menu elements working.
Example Header External With Sub Navigation contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Service manual',
"mastheadLogoUrl": '#0',
"titleUrl": '#0',
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": [ '#design-system', '#patterns', '#access-codes' ],
"currentPageTitle": 'Design system',
"itemsList": [
{
"text": 'Service standard',
"url": '#0'
},
{
"text": 'Design system',
"url": '#design-system'
},
{
"text": 'Accessibility',
"url": '#0'
},
{
"text": 'Brand guidelines',
"url": '#0'
},
{
"text": 'Content style guide',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle menu'
},
"subNavigation": {
"id": 'sub-nav',
"overviewUrl": '#design-system',
"overviewText": 'Overview',
"ariaLabel": 'Section menu',
"currentPath": '#access-codes',
"itemsList": [
{
"text": 'Guidance',
"url": '#0'
},
{
"text": 'Foundations',
"url": '#0'
},
{
"text": 'Components',
"url": '#0'
},
{
"text": 'Patterns',
"url": '#patterns',
"sections": [
{
"sectionTitle": 'Ask users for...',
"children": [
{
"title": 'Access codes',
"url": '#access-codes'
},
{
"title": 'Addresses',
"url": '#0'
},
{
"title": 'Dates',
"url": '#0'
},
{
"title": 'Durations',
"url": '#0'
},
{
"title": 'Email addresses',
"url": '#0'
},
{
"title": 'Numeric values',
"url": '#0'
},
{
"title": 'Phone numbers',
"url": '#0'
}
]
},
{
"sectionTitle": 'Help users to...',
"children": [
{
"title": 'Access support in multiple languages',
"url": '#0'
},
{
"title": 'Change language',
"url": '#0'
},
{
"title": 'Check answers',
"url": '#0'
},
{
"title": 'Control cookies',
"url": '#0'
},
{
"title": 'Correct errors',
"url": '#0'
},
{
"title": 'Extend a session',
"url": '#0'
}
]
}
]
}
]
}
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Service manual</div>
</a>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<button type="submit"
class="ons-btn ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost"
aria-label="Toggle menu" aria-controls="main-nav" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper">
<div class="ons-container ons-container--gutterless@2xs@l">
<nav class="ons-navigation ons-navigation--main ons-js-navigation" id="main-nav" aria-label="Main menu"
data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Service standard </a>
</li>
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#design-system"> Design system </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Accessibility </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Brand guidelines </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Content style guide </a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="ons-navigation ons-navigation--sub ons-u-d-no@2xs@l" id="sub-nav" aria-label="Section menu"
data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@2xs@l">
<ul class="ons-navigation__list ons-navigation__list">
<li class="ons-navigation__item">
<a class="ons-navigation__link ons-navigation__link" href="#0"> Guidance </a>
</li>
<li class="ons-navigation__item">
<a class="ons-navigation__link ons-navigation__link" href="#0"> Foundations </a>
</li>
<li class="ons-navigation__item">
<a class="ons-navigation__link ons-navigation__link" href="#0"> Components </a>
</li>
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link ons-navigation__link" href="#patterns"> Patterns </a>
</li>
</ul>
</div>
</nav>
<div class="ons-u-d-no@l">
<button type="button" class="ons-btn ons-u-d-no ons-js-sub-navigation-button ons-btn--mobile ons-btn--dropdown"
aria-label="Toggle Design system menu" aria-controls="sub-nav" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Design system</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
<nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs"
id="sub-nav--mobile" aria-hidden="true" aria-label="Section menu" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@2xs@l">
<ul class="ons-navigation__list ons-navigation__list--parent">
<li class="ons-navigation__item">
<a class="ons-navigation__link" href="#design-system">Overview</a>
</li>
<li class="ons-navigation__item">
<a class="ons-navigation__link" href="#0"> Guidance </a>
</li>
<li class="ons-navigation__item">
<a class="ons-navigation__link" href="#0"> Foundations </a>
</li>
<li class="ons-navigation__item">
<a class="ons-navigation__link" href="#0"> Components </a>
</li>
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#patterns"> Patterns </a>
<h3 class="ons-navigation__list-header">Ask users for...</h3>
<ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-2xs">
<li class="ons-navigation__item ons-list__item ons-navigation__item--active">
<a class="ons-navigation__link ons-navigation__link--section" href="#access-codes"> Access codes </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Addresses </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Dates </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Durations </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Email addresses </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Numeric values </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Phone numbers </a>
</li>
</ul>
<h3 class="ons-navigation__list-header">Help users to...</h3>
<ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-2xs">
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Access support in multiple
languages </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Change language </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Check answers </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Control cookies </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Correct errors </a>
</li>
<li class="ons-navigation__item ons-list__item">
<a class="ons-navigation__link ons-navigation__link--section" href="#0"> Extend a session </a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>External with Welsh logo
Use this for services translated in Welsh.
When the language parameter has been set, setting current to true will switch the language link shown and if the isocode is set to cy and current set to true it will change the ONS logo to the Welsh one.
Example Header External Welsh contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'Gwasanaeth Cymraeg',
"titleUrl": '#0',
"mastheadLogoUrl": '#0',
"language": {
"languages": [
{
"url": '#0',
"isoCode": 'en',
"text": 'English',
"current": false
},
{
"url": '#0',
"isoCode": 'cy',
"text": 'Cymraeg',
"current": true
}
]
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">Nid yw’r wefan hon yn cefnogi eich porwr mwyach.</span><span
class="ons-browser-banner__cta"> Gallwch <a class="ons-browser-banner__link"
href="https://cy.ons.gov.uk/help/browsers">ddiweddaru eich porwr i’r fersiwn ddiweddaraf</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="262" height="24"
viewBox="15 2 620 60" aria-labelledby="ons-logo-cy-alt" role="img">
<title id="ons-logo-cy-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M77.75,49a17.93,17.93,0,0,1-8.28-1.73l1.16-2.82A14.34,14.34,0,0,0,77.06,46c4.32,0,7.51-2.63,7.51-6.43,0-8.06-14.37-4.73-14.37-15,0-4.83,3.89-9.1,10.14-9.1a15,15,0,0,1,7.34,1.74L86.6,19.77a11.93,11.93,0,0,0-5.83-1.55c-4,0-6.64,2.49-6.64,6.05,0,7.74,14.5,4.32,14.5,15.06C88.63,45,84.05,49,77.75,49Z" />
<path
d="M118.8,48.38h-3.32l-5.74-18.62a22.79,22.79,0,0,1-.69-3.05h0a18.8,18.8,0,0,1-.64,3.05l-5.91,18.62H99.12l-8-25.28h3.93l5.22,18.58a22.26,22.26,0,0,1,.65,3.23H101a22.38,22.38,0,0,1,.69-3.23l5.74-18.58h3.45l5.57,18.58a32.11,32.11,0,0,1,.73,3.23h.09a31.83,31.83,0,0,1,.65-3.23l5.3-18.58h3.5Z" />
<path
d="M138,58.47h-4.1l4.53-10.09-9.3-25.28h4.05l6.09,18.62a26.88,26.88,0,0,1,.86,3.43h.09s.38-1.74.95-3.43l6.25-18.62h3.45Z" />
<path
d="M165.43,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,165.43,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.46,10.65,8.46,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path
d="M190.68,49c-8,0-12-5-12-12.8,0-8.45,4.83-13.51,12-13.51a19.12,19.12,0,0,1,4.7.56V11.56h3.67v35.7A17.81,17.81,0,0,1,190.68,49Zm4.7-23.69a16.78,16.78,0,0,0-3.93-.42c-6.6,0-9,5.44-9,11,0,6.43,2.45,10.65,8.45,10.65a9.2,9.2,0,0,0,4.49-1Z" />
<path
d="M210.88,25.35v23h-3.67v-23h-3.75V23.1h3.75V19.44c0-4.6,2.72-7.93,8.07-7.93.39,0,.86.05.86.05v2.35h-.43c-2.54,0-4.83,1.64-4.83,5.11V23.1h5.26v2.25Z" />
<path
d="M228.32,49c-7,0-10.19-3-10.19-7.46,0-6.89,7.12-8.81,15.66-9.61V30.37c0-4.08-2.76-5.35-6.51-5.35a16.5,16.5,0,0,0-6.56,1.46l-.95-2.25a20.3,20.3,0,0,1,8.16-1.74c5.13,0,9.36,2.06,9.36,8.21V47.26A20.22,20.22,0,0,1,228.32,49Zm5.47-15.1c-7.29.84-12.08,2.11-12.08,7.55,0,3.75,2.77,5.35,7,5.35a11.44,11.44,0,0,0,5.09-1Z" />
<path d="M268,34.38v14h-5.7v-14l-9.88-18.25h6l6.86,13.75h.08l7.08-13.75h5.44Z" />
<path
d="M287,49.06a15.87,15.87,0,0,1-7.64-1.83l1.43-3.47a10.52,10.52,0,0,0,5.52,1.51c2.76,0,5-1.79,5-4,0-6-11.09-3.19-11.09-11.44,0-3.75,3.37-7.41,8.85-7.41a13.47,13.47,0,0,1,7.12,1.83l-1.43,3.14A8.35,8.35,0,0,0,290.14,26c-2.81,0-4.53,1.69-4.53,3.62,0,5.63,11.3,3.14,11.3,11.58C296.91,45.22,293.07,49.06,287,49.06Z" />
<path
d="M310.65,49c-5.31,0-7.34-3.43-7.34-6.85V26.41h-3.54V23.12h3.54V17.45L308.7,16v7.17h4.92v3.29H308.7V41.84a3.27,3.27,0,0,0,3,3.52h.48a5.13,5.13,0,0,0,1.46-.24v3.33A7.53,7.53,0,0,1,310.65,49Z" />
<path
d="M327.48,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.87,1.45L318.2,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.68,22.68,0,0,1,327.48,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M354.33,49.06c-8.16,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.31,19.31,0,0,1,4.48.52V11.58h5.4V47.23A20.28,20.28,0,0,1,354.33,49.06Zm3.88-23A13.34,13.34,0,0,0,355,25.7c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.29,9.8a8.21,8.21,0,0,0,3.71-.79Z" />
<path
d="M373.28,37.71c.52,5,3.28,7.56,7.94,7.56a16.8,16.8,0,0,0,7.12-1.46l1.29,3.42a20,20,0,0,1-8.89,1.83c-7.72,0-12.68-4.69-12.68-13.36,0-8.35,4.62-13.23,11.61-13.23s10.91,4.45,10.91,12.94Zm6.17-12c-3.71,0-6.64,2.95-6.51,9.24l12.42-1.73c0-5.17-2.36-7.47-5.91-7.47Z" />
<path
d="M404.7,59.15a23.91,23.91,0,0,1-9.45-1.78l1.43-3.48a18.42,18.42,0,0,0,7.25,1.46c4.74,0,6.77-2.44,6.77-6v-1.6a12.67,12.67,0,0,1-5.57,1c-6.6,0-11-4.83-11-12.47,0-8.17,4.45-13.84,13.12-13.84a19.1,19.1,0,0,1,8.8,1.83V48.88C416.05,55.54,411.43,59.15,404.7,59.15Zm6-32.7a7.93,7.93,0,0,0-3.71-.79c-4.92,0-7.33,4-7.33,10.41,0,6.24,2.41,9.62,7.07,9.62a8.66,8.66,0,0,0,4-.85Z" />
<path
d="M431.25,49.06c-7.42,0-10.92-3-10.92-7.78,0-6.8,7.12-8.63,15.58-9.38V30.44c0-3.47-2.37-4.5-5.83-4.5a18,18,0,0,0-6.86,1.45L422,24.3a23.94,23.94,0,0,1,9.11-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.82,22.82,0,0,1,431.25,49.06Zm4.66-14.63c-6.26.66-10.44,1.83-10.44,6.71,0,3.42,2.41,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M456.68,49.06c-7.17,0-10.32-3.33-10.32-8.72V23.12h5.4v17.5c0,2.67,1.68,4.74,5.17,4.74a10.49,10.49,0,0,0,4.62-.85V23.12h5.39V47.23A24.69,24.69,0,0,1,456.68,49.06Z" />
<path
d="M499.88,49.06c-9.32,0-15.58-6-15.58-17,0-10.46,6.82-16.6,15.84-16.6,4.27,0,6.95.84,8.76,1.83l-1.38,3.42a15.78,15.78,0,0,0-6.65-1.22c-6.17,0-10.7,3.85-10.7,12.81,0,8.44,4.23,12.85,9.5,12.85a10.53,10.53,0,0,0,4.44-.75v-11h-5.65V30h11.13V47.23C507.48,48.36,504.24,49.06,499.88,49.06Z" />
<path
d="M542.82,48.41h-5l-5-16.51a19.54,19.54,0,0,1-.65-3.29h-.09a20.56,20.56,0,0,1-.64,3.29L526.3,48.41h-5l-7.77-25.29h5.57L523.58,40a25.45,25.45,0,0,1,.61,3.47h.08A21.62,21.62,0,0,1,525,40l5-16.89h4.75L539.67,40a24.24,24.24,0,0,1,.7,3.47h.08a22.71,22.71,0,0,1,.61-3.47l4.57-16.89h5Z" />
<path d="M554.49,48.41V11.58h5.4V48.41Z" />
<path
d="M575.29,49.06c-7.42,0-10.91-3-10.91-7.78,0-6.8,7.12-8.63,15.57-9.38V30.44c0-3.47-2.37-4.5-5.82-4.5a18,18,0,0,0-6.86,1.45L566,24.3a23.92,23.92,0,0,1,9.1-1.83c5.61,0,9.92,2.29,9.92,8.77v16A22.57,22.57,0,0,1,575.29,49.06ZM580,34.43c-6.25.66-10.44,1.83-10.44,6.71,0,3.42,2.42,4.87,6.21,4.87a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M602.14,49.06c-8.15,0-12.64-4.74-12.64-12.94s4.92-13.47,12-13.47a19.4,19.4,0,0,1,4.49.52V11.58h5.39V47.23A20.28,20.28,0,0,1,602.14,49.06Zm3.89-23a13.11,13.11,0,0,0-3.24-.38c-5.57,0-7.77,4.69-7.77,10.09,0,6.14,2.16,9.8,7.3,9.8A8.33,8.33,0,0,0,606,44.8Z" />
<path
d="M627.44,49.06c-7.73,0-11.57-5.72-11.57-13.27s3.84-13.32,11.57-13.32S639,28.24,639,35.79,635.16,49.06,627.44,49.06Zm0-23.12c-4.66,0-6,4.88-6,9.8s1.47,9.62,6,9.62,6-4.69,6-9.62S632.1,25.94,627.44,25.94Z" />
<path d="M643.63,48.41V11.58H649V48.41Z" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="130" height="27"
viewBox="0 5 645 116" aria-labelledby="ons-logo-stacked-cy-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M157.45,52a22.25,22.25,0,0,1-10.29-2.16l1.44-3.5a17.76,17.76,0,0,0,8,1.93c5.36,0,9.33-3.27,9.33-8,0-10-17.85-5.88-17.85-18.59,0-6,4.83-11.31,12.6-11.31a18.62,18.62,0,0,1,9.11,2.16l-1.34,3.15a14.65,14.65,0,0,0-7.23-1.92c-5,0-8.26,3.08-8.26,7.51,0,9.62,18,5.36,18,18.71,0,7-5.68,12-13.51,12" />
<path
d="M208.45,51.19h-4.13l-7.13-23.14a25.66,25.66,0,0,1-.85-3.79h-.11a22.89,22.89,0,0,1-.81,3.79l-7.34,23.14H184l-9.86-31.42H179l6.48,23.08a28.89,28.89,0,0,1,.81,4h.11a26.16,26.16,0,0,1,.85-4l7.13-23.08h4.29l6.92,23.08c.53,1.81.91,4,.91,4h.11a38.62,38.62,0,0,1,.8-4L214,19.77h4.34Z" />
<path
d="M232.33,63.72h-5.1l5.63-12.53L221.28,19.77h5l7.56,23.14A33.09,33.09,0,0,1,235,47.16h.11s.48-2.15,1.18-4.25L244,19.77h4.29Z" />
<path
d="M266.38,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C274.58,51,271,52,266.38,52m5.84-29.44a20.69,20.69,0,0,0-4.88-.52c-8.2,0-11.2,6.76-11.2,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path
d="M297.75,52c-9.92,0-14.9-6.18-14.9-15.92,0-10.49,6-16.78,14.9-16.78a23.76,23.76,0,0,1,5.84.7V5.44h4.56V49.79C306,51,302.36,52,297.75,52m5.84-29.44a20.61,20.61,0,0,0-4.87-.52c-8.2,0-11.21,6.76-11.21,13.64,0,8,3.06,13.23,10.51,13.23a11.37,11.37,0,0,0,5.57-1.23Z" />
<path
d="M322.85,22.57V51.19h-4.56V22.57h-4.66v-2.8h4.66V15.23c0-5.71,3.38-9.85,10-9.85.48,0,1.07.06,1.07.06V8.35h-.53c-3.17,0-6,2-6,6.35v5.07h6.54v2.8Z" />
<path
d="M344.52,52c-8.74,0-12.66-3.68-12.66-9.27,0-8.57,8.85-11,19.46-11.95V28.81c0-5.07-3.43-6.65-8.09-6.65A20.48,20.48,0,0,0,335.08,24l-1.18-2.8A25.47,25.47,0,0,1,344,19c6.38,0,11.64,2.56,11.64,10.2V49.79c-2.58,1.34-6.49,2.16-11.15,2.16m6.8-18.77c-9.06,1-15,2.62-15,9.38,0,4.66,3.43,6.65,8.68,6.65a14.14,14.14,0,0,0,6.32-1.29Z" />
<polygon
points="164.8 97.36 164.8 114.78 157.77 114.78 157.77 97.36 145.5 74.68 153 74.68 161.53 91.76 161.63 91.76 170.43 74.68 177.18 74.68 164.8 97.36" />
<path
d="M188.5,115.6a19.6,19.6,0,0,1-9.48-2.28l1.77-4.31a13,13,0,0,0,6.86,1.87c3.43,0,6.16-2.22,6.16-4.9,0-7.46-13.77-4-13.77-14.22,0-4.66,4.18-9.2,11-9.2a16.71,16.71,0,0,1,8.85,2.27l-1.77,3.9a10.43,10.43,0,0,0-5.74-1.81c-3.48,0-5.63,2.1-5.63,4.49,0,7,14.05,3.91,14.05,14.4,0,5-4.77,9.79-12.28,9.79" />
<path
d="M217.85,115.48c-6.6,0-9.12-4.26-9.12-8.51V87.45h-4.39V83.37h4.39V76.32l6.7-1.87v8.92h6.11v4.08h-6.11v19.17a4,4,0,0,0,4.29,4.38,6.36,6.36,0,0,0,1.82-.3v4.14a9.67,9.67,0,0,1-3.69.64" />
<path
d="M238.76,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.55-3.84a29.58,29.58,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.39,12.39,0,0,0,5.25-1Z" />
<path
d="M272.12,115.6c-10.13,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.64,23.64,0,0,1,5.57.64V69h6.7v44.3c-2.57,1.34-6.37,2.27-11.52,2.27M276.94,87a16.81,16.81,0,0,0-4-.47c-6.91,0-9.64,5.83-9.64,12.53,0,7.64,2.67,12.19,9.05,12.19a10.36,10.36,0,0,0,4.61-1Z" />
<path
d="M295.67,101.49c.64,6.24,4.07,9.39,9.86,9.39a20.7,20.7,0,0,0,8.84-1.81l1.62,4.26a25.31,25.31,0,0,1-11.05,2.27c-9.6,0-15.76-5.83-15.76-16.61,0-10.37,5.73-16.43,14.42-16.43s13.56,5.53,13.56,16.08Zm7.66-14.86c-4.61,0-8.25,3.67-8.09,11.48L310.68,96c0-6.47-2.9-9.33-7.35-9.33" />
<path
d="M334.71,128.13A29.87,29.87,0,0,1,323,125.92l1.78-4.32a23.24,23.24,0,0,0,9,1.81c5.9,0,8.42-3,8.42-7.41v-2a15.84,15.84,0,0,1-6.92,1.28c-8.2,0-13.67-6-13.67-15.5,0-10.15,5.52-17.19,16.3-17.19,4.66,0,8.84,1,10.94,2.27v30.54c0,8.27-5.74,12.76-14.1,12.76m7.45-40.62a9.74,9.74,0,0,0-4.61-1c-6.11,0-9.12,5-9.12,12.94,0,7.75,3,11.94,8.8,11.94a10.79,10.79,0,0,0,4.93-1.05Z" />
<path
d="M367.69,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.84-10.72,19.35-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.44,22.44,0,0,0-8.52,1.8l-1.56-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.91,2.27-12.11,2.27m5.79-18.19c-7.77.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path
d="M399.28,115.6c-8.9,0-12.81-4.14-12.81-10.84V83.37h6.7v21.74c0,3.32,2.08,5.88,6.43,5.88a13.1,13.1,0,0,0,5.74-1V83.37H412v29.95c-2.47,1.23-7,2.28-12.76,2.28" />
<path
d="M453,115.6c-11.58,0-19.35-7.41-19.35-21.1,0-13,8.47-20.63,19.67-20.63,5.31,0,8.63,1,10.88,2.27l-1.71,4.26c-1.34-.76-4.61-1.52-8.26-1.52-7.66,0-13.29,4.78-13.29,15.91,0,10.49,5.25,16,11.79,16a13.17,13.17,0,0,0,5.52-.93V96.13h-7V91.94H465v21.38c-2.63,1.4-6.65,2.28-12.06,2.28" />
<path
d="M506.31,114.78h-6.22l-6.16-20.51a25.15,25.15,0,0,1-.8-4.08H493a25.8,25.8,0,0,1-.81,4.08l-6.38,20.51h-6.21L470,83.37h6.91l5.53,21a30.89,30.89,0,0,1,.75,4.31h.1a27.75,27.75,0,0,1,.91-4.31l6.28-21h5.89l6.06,21a31.25,31.25,0,0,1,.86,4.31h.11a29.91,29.91,0,0,1,.74-4.31l5.69-21H516Z" />
<polygon points="520.81 114.78 520.81 69.03 527.51 69.03 527.51 87.9 527.51 114.78 520.81 114.78" />
<path
d="M546.65,115.6c-9.22,0-13.56-3.67-13.56-9.68,0-8.45,8.85-10.72,19.36-11.65V92.46c0-4.31-3-5.59-7.24-5.59a22.49,22.49,0,0,0-8.53,1.8l-1.55-3.84a29.67,29.67,0,0,1,11.31-2.27c7,0,12.33,2.85,12.33,10.89v19.88c-2.68,1.34-6.92,2.27-12.12,2.27m5.8-18.19c-7.78.82-13,2.28-13,8.34,0,4.25,3,6.06,7.72,6.06a12.44,12.44,0,0,0,5.26-1Z" />
<path
d="M580,115.6c-10.14,0-15.71-5.89-15.71-16.09s6.11-16.72,15-16.72a23.73,23.73,0,0,1,5.58.64V69h6.7v44.3c-2.57,1.34-6.38,2.27-11.52,2.27M584.84,87a16.81,16.81,0,0,0-4-.47c-6.92,0-9.65,5.83-9.65,12.53,0,7.64,2.68,12.19,9.06,12.19a10.39,10.39,0,0,0,4.61-1Z" />
<path
d="M611.44,115.6c-9.6,0-14.37-7.11-14.37-16.5s4.77-16.54,14.37-16.54,14.31,7.16,14.31,16.54-4.71,16.5-14.31,16.5m0-28.73c-5.79,0-7.5,6-7.5,12.18s1.82,12,7.5,12,7.51-5.83,7.51-12-1.72-12.18-7.51-12.18" />
<polygon points="631.56 114.78 631.56 69.03 638.26 69.03 638.26 89.06 638.26 114.78 631.56 114.78" />
</g>
</svg>
</div>
</a>
</div>
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
<div class="ons-grid__col ons-col-auto">
<ul class="ons-language-links">
<li class="ons-language-links__item">
<a href="#0" lang="en">
<span class="ons-u-vh">Change language to </span> English </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">Gwasanaeth Cymraeg</div>
</a>
</div>
</div>
</div>
</div>
</header>Neutral header for multi-coloured brand logo
A colourless variant for services with a multi-coloured primary brand logo.
Set the variant parameter with the value “neutral”.
Open this variant in a new tab to see the menu element working.
Example Header Neutral contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"title": 'ONS Service',
"variants": 'neutral',
"mastheadLogoUrl": '#0',
"serviceLinks": {
"id": "service-links",
"ariaLabel": 'Services menu',
"ariaListLabel": 'Menu',
"toggleServicesButton": {
"text": 'Account',
"ariaLabel": 'Toggle services menu'
},
"itemsList": [
{
"text": "Help",
"url": "#0"
},
{
"text": "My Account",
"url": "#0"
},
{
"text": "Sign out",
"url": "#0"
}
]
},
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": '#menu-item-2',
"currentPageTitle": 'Design system',
"itemsList": [
{
"text": 'Menu item 1',
"url": '#0'
},
{
"text": 'Menu item 2',
"url": '#menu-item-2'
},
{
"text": 'Menu item 3',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle main menu'
}
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header ons-header--neutral">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</a>
</div>
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
<div class="ons-grid__col ons-col-auto ons-u-d-no@2xs@m">
<nav class="ons-header-service-nav ons-header-service-nav--main" aria-label="Services menu">
<ul class="ons-header-service-nav__list">
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-grid__col ons-col-auto ons-u-d-no@m">
<button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--neutral"
aria-label="Toggle services menu" aria-controls="service-links" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Account</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav"
id="service-links" aria-label="Services menu">
<ul class="ons-header-service-nav__list">
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Help</a>
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">My Account</a>
</li>
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
<a href="#0" class="ons-header-service-nav__link">Sign out</a>
</li>
</ul>
</nav>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">ONS Service</div>
</div>
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
<button type="submit"
class="ons-btn ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost"
aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</button>
</div>
</div>
</div>
</div>
<div class="ons-navigation-wrapper ons-navigation-wrapper--neutral">
<div class="ons-container ons-container--gutterless@2xs@l">
<nav class="ons-navigation ons-navigation--main ons-js-navigation" id="main-nav" aria-label="Main menu"
data-analytics="header-navigation">
<ul class="ons-navigation__list">
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Menu item 1 </a>
</li>
<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link" href="#menu-item-2"> Menu item 2 </a>
</li>
<li class="ons-navigation__item ">
<a class="ons-navigation__link" href="#0"> Menu item 3 </a>
</li>
</ul>
</nav>
</div>
</div>
</header>Basic header
Set the variant parameter with the value “basic”.
Header with search button
This header, used on the new website landing page, contains both Search and Menu buttons, but they can be disabled depending on the user need.
Open this variant in a new tab to see the menu and search elements working.
Example Header With Search Button contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"variants": 'basic',
"menuLinks": {
"keyLinks": [
{
'heading': 'Taking part in a survey?',
'description': 'It’s never been more important.'
},
{
'heading': 'Release calendar',
'description': 'View our latest and upcoming releases.'
},
{
'heading': 'Explore local statistics',
'url': '#0',
'description': 'Explore statistics across the UK.'
}
],
"columns": [
{
"groups": [
{
"heading": "People, population and community",
"groupItems": [
{
"text": "Armed forces community"
},
{
"text": "Births, deaths and marriages"
},
{
"text": "Crime and justice"
},
{
"text": "Cultural identity"
},
{
"text": "Education and childcare"
},
{
"text": "Elections"
},
{
"text": "Health and social care"
},
{
"text": "Household characteristics"
},
{
"text": "Housing"
},
{
"text": "Leisure and tourism"
},
{
"text": "Personal and household finances"
},
{
"text": "Population and migration"
},
{
"text": "Well-being"
}
]
}
]
},
{
"groups": [
{
"heading": "Business, industry and trade",
"groupItems": [
{
"text": "Business"
},
{
"text": "Changes to business"
},
{
"text": "Construction industry"
},
{
"text": "International trade"
},
{
"text": "IT and internet industry"
},
{
"text": "Manufacturing and production industry"
},
{
"text": "Retail industry",
"url": "#0"
},
{
"text": "Tourism industry"
}
]
},
{
"heading": "Employment and labour market",
"url": "#0",
"groupItems":
[
{
"text": "People in work"
},
{
"text": "People not in work"
}
]
}
]
},
{
"groups": [
{
"heading": "Economy",
"groupItems": [
{
"text": "Economic output and productivity"
},
{
"text": "Government, public sector and taxes"
},
{
"text": "Gross Value Added (GVA)"
},
{
"text": "Investments, pensions and trusts"
},
{
"text": "Regional accounts"
},
{
"text": "Environmental accounts"
},
{
"text": "Gross Domestic Product (GDP)"
},
{
"text": "Inflation and price indices"
},
{
"text": "National accounts"
}
]
}
]
}
]
},
"searchLinks": {
"id": "search-links",
"searchNavigationAriaLabel": 'Nav Search',
"searchButtonAriaLabel": 'Toggle search',
'heading': 'Popular searches',
"itemsList": [
{
"url": '#1',
"text": 'Cost of living'
},
{
"url": '#1',
"text": 'Inflation'
},
{
"url": '#3',
"text": 'NHS waiting times'
},
{
"url": '#0',
"text": 'Wellbeing'
},
{
"url": '#0',
"text": 'Baby names'
}
]
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header ons-header--basic">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24" viewBox="33 2 552 60"
aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116"
aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
<div class="ons-grid__col ons-col-auto ons-header__menu-links">
<div class="ons-header__links ons-grid__col">
<button type="button"
class="ons-btn ons-u-fs-s--b ons-js-toggle-nav-menu button-nav active disabled ons-btn--menu"
aria-label="Toggle menu" aria-controls="" aria-expanded="true" aria-disabled="true">
<span class="ons-btn__inner"><svg class="ons-icon ons-u-mr-2xs" viewBox="0 0 8 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg><span class="ons-btn__text">Menu</span></span>
</button>
</div>
<nav class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl" id="" aria-label="Menu navigation"
aria-hidden="false">
<div class="ons-container">
<ul class="ons-grid ons-header-nav-menu__key-list">
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading"> Taking part in a survey? </h2>
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description"> It’s never been more important.
</p>
</li>
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading"> Release calendar </h2>
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description"> View our latest and upcoming
releases. </p>
</li>
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
<a href="#0" class="ons-header-nav-menu__link">Explore local statistics</a>
</h2>
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description"> Explore statistics across the UK.
</p>
</li>
</ul>
</div>
<div class="ons-container">
<ul class="ons-grid ons-list ons-list--bare">
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading"> People, population and community </h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Armed forces community </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Births, deaths and marriages </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Crime and justice </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Cultural identity </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Education and childcare </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Elections </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Health and social care </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Household characteristics </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Housing </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Leisure and tourism </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Personal and household finances </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Population and migration </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Well-being </p>
</li>
</ul>
</li>
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading"> Business, industry and trade </h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Business </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Changes to business </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Construction industry </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> International trade </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> IT and internet industry </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Manufacturing and production industry </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text">
<a href="#0" class="ons-header-nav-menu__link"> Retail industry </a>
</p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Tourism industry </p>
</li>
</ul>
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
<a href="#0" class="ons-header-nav-menu__link">Employment and labour market</a>
</h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> People in work </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> People not in work </p>
</li>
</ul>
</li>
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading"> Economy </h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Economic output and productivity </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Government, public sector and taxes </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Gross Value Added (GVA) </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Investments, pensions and trusts </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Regional accounts </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Environmental accounts </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Gross Domestic Product (GDP) </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Inflation and price indices </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> National accounts </p>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="ons-header__links ons-grid__col ons-header__menu-link">
<button type="button"
class="ons-btn ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled ons-btn--search"
aria-label="Toggle search" aria-controls="search-links" aria-expanded="true" aria-disabled="true">
<span class="ons-btn__inner"><svg class="ons-icon ons-u-mr-2xs" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" role="img">
<path
d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z" />
</svg><span class="ons-btn__text"></span></span>
</button>
</div>
<nav class="ons-js-header-search ons-header-nav-search " id="search-links" aria-label="Nav Search"
aria-hidden="false">
<div class="ons-container">
<div class="ons-header-nav-search__input">
<div class="ons-field">
<label class="ons-label" for="search-field" id="header-search-input-label">Search the ONS</label>
<span
class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button ons-input__button--header-search">
<input type="search" id="search-field"
class="ons-input ons-input--text ons-input-type__input ons-search__input ons-input--header-search ons-input--w-full" />
<button type="submit" class="ons-btn ons-search__btn ons-btn--header-search">
<span class="ons-btn__inner"><svg class="ons-icon" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" role="img">
<path
d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z" />
</svg><span class="ons-btn__text ons-u-vh@2xs@s"><span
class="ons-u-vh">Search</span></span></span>
</button>
</span>
</div>
</div>
</div>
<div class="ons-container">
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading"> Popular searches </h2>
<ul class="ons-list ons-list--bare ons-list--inline">
<li class="ons-list__item">
<a href="#1" class="ons-u-fs-r ons-header-nav-search__text">Cost of living </a>
</li>
<li class="ons-list__item">
<a href="#1" class="ons-u-fs-r ons-header-nav-search__text">Inflation </a>
</li>
<li class="ons-list__item">
<a href="#3" class="ons-u-fs-r ons-header-nav-search__text">NHS waiting times </a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-u-fs-r ons-header-nav-search__text">Wellbeing </a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-u-fs-r ons-header-nav-search__text">Baby names </a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>Basic Header with Menu
This header, used on the new website landing page, contains the menu.
Open this variant in a new tab to see the menu element working.
Example Header Basic contents
Nunjucks
{% from "components/header/_macro.njk" import onsHeader %}
{{
onsHeader({
"variants": 'basic',
"menuLinks": {
"keyLinks": [
{
'heading': 'Taking part in a survey?',
'description': 'It’s never been more important.'
},
{
'heading': 'Release calendar',
'description': 'View our latest and upcoming releases.'
},
{
'heading': 'Explore local statistics',
'url': '#0',
'description': 'Explore statistics across the UK.'
}
],
"columns": [
{
"groups": [
{
"heading": "People, population and community",
"groupItems": [
{
"text": "Armed forces community"
},
{
"text": "Births, deaths and marriages"
},
{
"text": "Crime and justice"
},
{
"text": "Cultural identity"
},
{
"text": "Education and childcare"
},
{
"text": "Elections"
},
{
"text": "Health and social care"
},
{
"text": "Household characteristics"
},
{
"text": "Housing"
},
{
"text": "Leisure and tourism"
},
{
"text": "Personal and household finances"
},
{
"text": "Population and migration"
},
{
"text": "Well-being"
}
]
}
]
},
{
"groups": [
{
"heading": "Business, industry and trade",
"groupItems": [
{
"text": "Business"
},
{
"text": "Changes to business"
},
{
"text": "Construction industry"
},
{
"text": "International trade"
},
{
"text": "IT and internet industry"
},
{
"text": "Manufacturing and production industry"
},
{
"text": "Retail industry",
"url": "#0"
},
{
"text": "Tourism industry"
}
]
},
{
"heading": "Employment and labour market",
"url": "#0",
"groupItems":
[
{
"text": "People in work"
},
{
"text": "People not in work"
}
]
}
]
},
{
"groups": [
{
"heading": "Economy",
"groupItems": [
{
"text": "Economic output and productivity"
},
{
"text": "Government, public sector and taxes"
},
{
"text": "Gross Value Added (GVA)"
},
{
"text": "Investments, pensions and trusts"
},
{
"text": "Regional accounts"
},
{
"text": "Environmental accounts"
},
{
"text": "Gross Domestic Product (GDP)"
},
{
"text": "Inflation and price indices"
},
{
"text": "National accounts"
}
]
}
]
}
]
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| phase | PhaseBanner (ref) | false | Settings to set the Phase banner component within the HTML <header> element |
| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px |
| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport |
| classes | string | false | Classes to add to the wrapping header |
| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" |
| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| mastheadLogo | object<MastheadLogo> | false | Settings for a custom organisation logo in the masthead. Defaults to the ONS logo. |
| language | object<Language> | false | Settings for the language selector |
| serviceLinks | object<ServiceLinks> | false | Settings for the service links in the masthead |
| title | string | true (unless titleLogo is set or variant is set to basic) | The title for the service |
| description | string | false | Tagline or description for the service |
| titleAsH1 | boolean | false | Override to wrap the header title in an <h1> heading |
| titleLogo | object<TitleLogo> | false | Settings for a custom title logo in the header. |
| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML href attribute for the link. |
| button | object<SignOutButton> | false | Settings for the sign out button in the header used to exit a transactional service |
| navigation | array<Navigation> | false | Settings for the main menu links |
| siteSearchAutosuggest | Autosuggest (ref) | false | Sets the autosuggest functionality in the header |
| menuLinks | object<MenuLinks> | false | Settings for the menu button navigation in the masthead |
| searchLinks | object<SearchLinks> | false | Settings for the search button navigation in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | false | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| multipleLogos | object<MultipleLogos> | false | Allows for up to three logos to be used in the masthead |
| Name | Type | Required | Description |
|---|---|---|---|
| logo1 | object<Logo> | true | First Logo |
| logo2 | object<Logo> | false | Second Logo |
| logo3 | object<Logo> | false | Third Logo |
| Name | Type | Required | Description |
|---|---|---|---|
| image | string | false | HTML to render an image for example embedded <svg> or <img>. Use 'ONS Logo' for the default ONS icon. |
| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML href attribute for the link. |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to be added to the masthead logo |
| large | string | true | HTML to render an image for example embedded <svg> or <img> |
| small | string | false | Optionally provide a version of the logo more suited to mobile viewports |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Service links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Service links”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| toggleServicesButton | object<ToggleButton> | true | Settings for the mobile service links toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the <nav> element |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Menu links navigation”. |
| ariaListLabel | string | false | The aria-label attribute added to the <ul> element. Defaults to “Menu links”. |
| keyLinks | array<KeyLink> | true | Settings for an array of key list items |
| columns | array<Column> | true | Settings for list of columns that contain menu links |
| toggleMenuButton | object<ToggleButton> | true | Settings for the menu toggle button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the search button element. Used for the aria-controls attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the search button element |
| searchNavigationAriaLabel | string | false | The aria-label attribute added to the search navigation element. Defaults to Search navigation”. |
| searchButtonAriaLabel | string | false | The aria-label attribute added to the search button element. Defaults to "Toggle search". |
| heading | string | true | The heading label for the search items list |
| itemsList | array<SearchItem> | true | Settings for an array of searches associated with each search link. The list can contain a maximum of 5 items. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the search item. |
| url | string | true | The URL for the search item |
| Name | Type | Required | Description |
|---|---|---|---|
| languages | array<languages> | true | Settings for an array of language toggle links |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | URL to change the application language |
| isoCode | string | true | The ISO language code for the language |
| text | string | true | The name of the language to display |
| abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports |
| current | boolean | true | The current selected language |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Main menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleNavigationButton | array<ToggleButton> | true | Settings for the navigation menu toggle button displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| subNavigation | array<subNavigation> | false | Settings for the sub navigation menu links |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | false | The text for the toggle button label. Defaults to “Menu” |
| ariaLabel | string | false | The aria-label attribute for the toggle button. Defaults to “Toggle menu” |
| Name | Type | Required | Description |
|---|---|---|---|
| classes | string | false | Classes to add to the list item element |
| url | string | true | The URL for the HTML href attribute for the path to the linked page |
| text | string | true | The text label for the link |
| id | string | false | The HTML id of the link |
| ariaLabel | string | false | The aria-label for the item. |
| title | string | false | The title text for the list item element |
| iconType | string | false | Adds an icon to a service link item when set to the name of one of the available icons. This is not compatible with navigation links. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button |
| name | string | false | Sets the HTML name attribute for the <button>. Not valid if url is set. |
| url | string | false | If set, will create an HTML anchor link with the required classes and attributes |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the <nav> element. Used for the aria-controls attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The aria-label attribute added to the <nav> element. Defaults to “Section menu”. |
| itemsList | array<Item> | true | Settings for an array of list items for each navigation link |
| currentPath | string or array<string> | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading for the link |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| description | string | true | The description label for the link |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | array<group> | true | settings for array of groups in column |
| Name | Type | Required | Description |
|---|---|---|---|
| heading | string | true | The heading label for the menu group |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
| groupItems | array<groupItem> | false | Settings for an array of group items for each list item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the group-item |
| url | string | false | The URL for the HTML href attribute for the path to the linked page |
HTML
<header class="ons-header ons-header--basic">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="250" height="24" viewBox="33 2 552 60"
aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116"
aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
<div class="ons-grid__col ons-col-auto ons-header__menu-links">
<div class="ons-header__links ons-grid__col">
<button type="button"
class="ons-btn ons-u-fs-s--b ons-js-toggle-nav-menu button-nav active disabled ons-btn--menu"
aria-label="Toggle menu" aria-controls="" aria-expanded="true" aria-disabled="true">
<span class="ons-btn__inner"><svg class="ons-icon ons-u-mr-2xs" viewBox="0 0 8 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
aria-hidden="true">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg><span class="ons-btn__text">Menu</span></span>
</button>
</div>
<nav class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl" id="" aria-label="Menu navigation"
aria-hidden="false">
<div class="ons-container">
<ul class="ons-grid ons-header-nav-menu__key-list">
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading"> Taking part in a survey? </h2>
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description"> It’s never been more important.
</p>
</li>
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading"> Release calendar </h2>
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description"> View our latest and upcoming
releases. </p>
</li>
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
<a href="#0" class="ons-header-nav-menu__link">Explore local statistics</a>
</h2>
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description"> Explore statistics across the UK.
</p>
</li>
</ul>
</div>
<div class="ons-container">
<ul class="ons-grid ons-list ons-list--bare">
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading"> People, population and community </h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Armed forces community </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Births, deaths and marriages </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Crime and justice </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Cultural identity </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Education and childcare </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Elections </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Health and social care </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Household characteristics </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Housing </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Leisure and tourism </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Personal and household finances </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Population and migration </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Well-being </p>
</li>
</ul>
</li>
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading"> Business, industry and trade </h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Business </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Changes to business </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Construction industry </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> International trade </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> IT and internet industry </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Manufacturing and production industry </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text">
<a href="#0" class="ons-header-nav-menu__link"> Retail industry </a>
</p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Tourism industry </p>
</li>
</ul>
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
<a href="#0" class="ons-header-nav-menu__link">Employment and labour market</a>
</h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> People in work </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> People not in work </p>
</li>
</ul>
</li>
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading"> Economy </h2>
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Economic output and productivity </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Government, public sector and taxes </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Gross Value Added (GVA) </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Investments, pensions and trusts </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Regional accounts </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Environmental accounts </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Gross Domestic Product (GDP) </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> Inflation and price indices </p>
</li>
<li class="ons-u-mb-no">
<p class="ons-u-fs-s ons-header-nav-menu_text"> National accounts </p>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Header’ component on GitHub (opens in a new tab)