Header examples

• # default

  Open this example in a new tab

  {}

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({}) }}
          

• # with service name

  Open this example in a new tab

  Service Name

  {
    "serviceName": "Service Name",
    "serviceUrl": "/components/header"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "serviceName": "Service Name",
    "serviceUrl": "/components/header"
  }) }}
          

• # with service name but no service url

  Open this example in a new tab

  Service Name

  {
    "serviceName": "Service Name"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "serviceName": "Service Name"
  }) }}
          

• # with navigation

  Open this example in a new tab

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # with custom menu button text

  Open this example in a new tab

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # with service name and navigation

  Open this example in a new tab

  Service Name

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # with large navigation

  Open this example in a new tab

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # with product name

  Open this example in a new tab

  Product Name

  {
    "productName": "Product Name"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "productName": "Product Name"
  }) }}
          

• # full width

  Open this example in a new tab

  {
    "containerClasses": "govuk-header__container--full-width",
    "navigationClasses": "govuk-header__navigation--end"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "containerClasses": "govuk-header__container--full-width",
    "navigationClasses": "govuk-header__navigation--end"
  }) }}
          

• # full width with navigation

  Open this example in a new tab

  {
    "containerClasses": "govuk-header__container--full-width",
    "navigationClasses": "govuk-header__navigation--end",
    "navigation": [
      {
        "href": "#1",
        "text": "Navigation item 1",
        "active": true
      },
      {
        "href": "#2",
        "text": "Navigation item 2"
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "containerClasses": "govuk-header__container--full-width",
    "navigationClasses": "govuk-header__navigation--end",
    "navigation": [
      {
        "href": "#1",
        "text": "Navigation item 1",
        "active": true
      },
      {
        "href": "#2",
        "text": "Navigation item 2"
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      }
    ]
  }) }}
          

• # with full width border

  Open this example in a new tab

  {
    "classes": "govuk-header--full-width-border"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "classes": "govuk-header--full-width-border"
  }) }}
          

• # navigation item with html

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "#1",
        "html": "<em>Navigation item 1</em>",
        "active": true
      },
      {
        "href": "#2",
        "html": "<em>Navigation item 2</em>"
      },
      {
        "href": "#3",
        "html": "<em>Navigation item 3</em>"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "navigation": [
      {
        "href": "#1",
        "html": "<em>Navigation item 1</em>",
        "active": true
      },
      {
        "href": "#2",
        "html": "<em>Navigation item 2</em>"
      },
      {
        "href": "#3",
        "html": "<em>Navigation item 3</em>"
      }
    ]
  }) }}
          

• # navigation item with text without link

  Open this example in a new tab

  {
    "navigation": [
      {
        "text": "Navigation item 1"
      },
      {
        "text": "Navigation item 2"
      },
      {
        "text": "Navigation item 3"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "navigation": [
      {
        "text": "Navigation item 1"
      },
      {
        "text": "Navigation item 2"
      },
      {
        "text": "Navigation item 3"
      }
    ]
  }) }}
          

• # with St. Edward's Crown

  Open this example in a new tab

  {
    "useTudorCrown": false
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "useTudorCrown": false
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "attributes": {
      "data-test-attribute": "value",
      "data-test-attribute-2": "value-2"
    }
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "attributes": {
      "data-test-attribute": "value",
      "data-test-attribute-2": "value-2"
    }
  }) }}
          

• # classes

  Open this example in a new tab

  {
    "classes": "app-header--custom-modifier"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "classes": "app-header--custom-modifier"
  }) }}
          

• # custom homepage url

  Open this example in a new tab

  {
    "homepageUrl": "/"
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "homepageUrl": "/"
  }) }}
          

• # with custom navigation label

  Open this example in a new tab

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # navigation item with attributes

  Open this example in a new tab

  {
    "navigation": [
      {
        "href": "/link",
        "text": "Item",
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "navigation": [
      {
        "href": "/link",
        "text": "Item",
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }) }}
          

• # navigation item with html as text

  Open this example in a new tab

  Service Name

  {
    "serviceName": "Service Name",
    "serviceUrl": "/components/header",
    "navigation": [
      {
        "href": "#1",
        "text": "<em>Navigation item 1</em>",
        "active": true
      },
      {
        "href": "#2",
        "text": "<em>Navigation item 2</em>"
      },
      {
        "href": "#3",
        "text": "<em>Navigation item 3</em>"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "serviceName": "Service Name",
    "serviceUrl": "/components/header",
    "navigation": [
      {
        "href": "#1",
        "text": "<em>Navigation item 1</em>",
        "active": true
      },
      {
        "href": "#2",
        "text": "<em>Navigation item 2</em>"
      },
      {
        "href": "#3",
        "text": "<em>Navigation item 3</em>"
      }
    ]
  }) }}
          

• # navigation item with html without link

  Open this example in a new tab

  Service Name

  {
    "serviceName": "Service Name",
    "serviceUrl": "/components/header",
    "navigation": [
      {
        "html": "<em>Navigation item 1</em>",
        "active": true
      },
      {
        "html": "<em>Navigation item 2</em>"
      },
      {
        "html": "<em>Navigation item 3</em>"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "serviceName": "Service Name",
    "serviceUrl": "/components/header",
    "navigation": [
      {
        "html": "<em>Navigation item 1</em>",
        "active": true
      },
      {
        "html": "<em>Navigation item 2</em>"
      },
      {
        "html": "<em>Navigation item 3</em>"
      }
    ]
  }) }}
          

• # with custom menu button label

  Open this example in a new tab

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # with custom navigation label and custom menu button text

  Open this example in a new tab

  {
    "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"
      }
    ]
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ]
  }) }}
          

• # empty navigation array

  Open this example in a new tab

  {
    "navigation": []
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "navigation": []
  }) }}
          

• # rebrand

  Open this example in a new tab

  {
    "rebrand": true
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "rebrand": true
  }) }}
          

• # with service name and navigation and rebrand

  Open this example in a new tab

  Service Name

  {
    "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"
      }
    ],
    "rebrand": true
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "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"
      }
    ],
    "rebrand": true
  }) }}
          

• # with product name and rebrand

  Open this example in a new tab

  Product Name

  {
    "productName": "Product Name",
    "rebrand": true
  }

  
  {% from "govuk/components/header/macro.njk" import govukHeader %}
  
  {{ govukHeader({
    "productName": "Product Name",
    "rebrand": true
  }) }}