{
"component": "header",
"fixtures": [
{
"name": "default",
"options": {},
"hidden": false,
"description": "The standard header as used on information pages on GOV.UK",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with St Edward's crown",
"options": {
"useTudorCrown": false
},
"hidden": false,
"description": "Legacy header with Queen Elizabeth II's crown.",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with service name",
"options": {
"serviceName": "Service Name",
"serviceUrl": "/components/header"
},
"hidden": false,
"description": "If your service is more than a few pages long, you can help users understand where they are by adding the service name.",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with service name but no service url",
"options": {
"serviceName": "Service Name"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with navigation",
"options": {
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with custom navigation label",
"options": {
"navigationLabel": "Custom navigation label",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with custom menu button text",
"options": {
"menuButtonText": "Dewislen",
"navigation": [
{
"href": "#1",
"text": "Eitem llywio 1",
"active": true
},
{
"href": "#2",
"text": "Eitem llywio 2"
},
{
"href": "#3",
"text": "Eitem llywio 3"
},
{
"href": "#4",
"text": "Eitem llywio 4"
}
]
},
"hidden": false,
"description": "Button translated into Welsh",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with custom menu button label",
"options": {
"menuButtonLabel": "Custom button label",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with service name and navigation",
"options": {
"serviceName": "Service Name",
"serviceUrl": "/components/header",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
"hidden": false,
"description": "If you need to include basic navigation, contact or account management links.",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with large navigation",
"options": {
"navigation": [
{
"href": "/browse/benefits",
"text": "Benefits"
},
{
"href": "/browse/births-deaths-marriages",
"text": "Births, deaths, marriages and care"
},
{
"href": "/browse/business",
"text": "Business and self-employed"
},
{
"href": "/browse/childcare-parenting",
"text": "Childcare and parenting"
},
{
"href": "/browse/citizenship",
"text": "Citizenship and living in the UK"
},
{
"href": "/browse/justice",
"text": "Crime, justice and the law"
},
{
"href": "/browse/disabilities",
"text": "Disabled people"
},
{
"href": "/browse/driving",
"text": "Driving and transport"
},
{
"href": "/browse/education",
"text": "Education and learning"
},
{
"href": "/browse/employing-people",
"text": "Employing people"
},
{
"href": "/browse/environment-countryside",
"text": "Environment and countryside"
},
{
"href": "/browse/housing-local-services",
"text": "Housing and local services"
},
{
"href": "/browse/tax",
"text": "Money and tax"
},
{
"href": "/browse/abroad",
"text": "Passports, travel and living abroad"
},
{
"href": "/browse/visas-immigration",
"text": "Visas and immigration"
},
{
"href": "/browse/working",
"text": "Working, jobs and pensions"
}
]
},
"hidden": false,
"description": "An edge case example with a large number of navigation items with long names used to test wrapping",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with product name",
"options": {
"navigationClasses": "govuk-header__navigation--end",
"productName": "Product Name"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "full width",
"options": {
"containerClasses": "govuk-header__container--full-width",
"navigationClasses": "govuk-header__navigation--end",
"productName": "Product Name"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "full width with navigation",
"options": {
"containerClasses": "govuk-header__container--full-width",
"navigationClasses": "govuk-header__navigation--end",
"productName": "Product Name",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with full width border",
"options": {
"classes": "govuk-header--full-width-border",
"productName": "Product Name"
},
"hidden": false,
"description": "Makes the header's bottom border full width without affecting the header's content.",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "navigation item with html",
"options": {
"serviceName": "Service Name",
"serviceUrl": "/components/header",
"navigation": [
{
"href": "#1",
"html": "Navigation item 1",
"active": true
},
{
"href": "#2",
"html": "Navigation item 2"
},
{
"href": "#3",
"html": "Navigation item 3"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "navigation item with text without link",
"options": {
"serviceName": "Service Name",
"serviceUrl": "/components/header",
"navigation": [
{
"text": "Navigation item 1"
},
{
"text": "Navigation item 2"
},
{
"text": "Navigation item 3"
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "attributes",
"options": {
"attributes": {
"data-test-attribute": "value",
"data-test-attribute-2": "value-2"
}
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "classes",
"options": {
"classes": "app-header--custom-modifier"
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "custom homepage url",
"options": {
"homepageUrl": "/"
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "navigation item with attributes",
"options": {
"navigation": [
{
"href": "/link",
"text": "Item",
"attributes": {
"data-attribute": "my-attribute",
"data-attribute-2": "my-attribute-2"
}
}
]
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "navigation item with html as text",
"options": {
"serviceName": "Service Name",
"serviceUrl": "/components/header",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "navigation item with html without link",
"options": {
"serviceName": "Service Name",
"serviceUrl": "/components/header",
"navigation": [
{
"html": "Navigation item 1",
"active": true
},
{
"html": "Navigation item 2"
},
{
"html": "Navigation item 3"
}
]
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "with custom navigation label and custom menu button text",
"options": {
"menuButtonText": "Custom menu button text",
"navigationLabel": "Custom navigation label",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
},
{
"name": "empty navigation array",
"options": {
"navigation": []
},
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
"html": ""
}
],
"previewLayout": "full-width"
}