header.yaml

params:
  - name: homepageUrl
    type: string
    required: false
    description: The URL of the homepage. Defaults to `"/"`.
  - name: productName
    type: string
    required: false
    description: Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`.
  - name: serviceName
    type: string
    required: false
    description: The name of your service, included in the header.
    deprecated: '5.9.0'
  - name: serviceUrl
    type: string
    required: false
    description: URL for the service name anchor.
    deprecated: '5.9.0'
  - name: navigation
    type: array
    required: false
    description: Can be used to add navigation to the header component.
    deprecated: '5.9.0'
    params:
      - name: text
        type: string
        required: true
        description: Text for the navigation item. If `html` is provided, the `text` option will be ignored.
        deprecated: '5.9.0'
      - name: html
        type: string
        required: true
        description: HTML for the navigation item. If `html` is provided, the `text` option will be ignored.
        deprecated: '5.9.0'
      - name: href
        type: string
        required: false
        description: URL of the navigation item anchor.
        deprecated: '5.9.0'
      - name: active
        type: boolean
        required: false
        description: Flag to mark the navigation item as active or not.
        deprecated: '5.9.0'
      - name: attributes
        type: object
        required: false
        description: HTML attributes (for example data attributes) to add to the navigation item anchor.
        deprecated: '5.9.0'
  - name: navigationClasses
    type: string
    required: false
    description: Classes for the navigation section of the header.
    deprecated: '5.9.0'
  - name: navigationLabel
    type: string
    required: false
    description: Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
    deprecated: '5.9.0'
  - name: menuButtonLabel
    type: string
    required: false
    description: Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
    deprecated: '5.9.0'
  - name: menuButtonText
    type: string
    required: false
    description: Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'.
    deprecated: '5.9.0'
  - name: containerClasses
    type: string
    required: false
    description: Classes for the container, useful if you want to make the header fixed width.
  - name: classes
    type: string
    required: false
    description: Classes to add to the header container.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the header container.
  - name: useTudorCrown
    type: boolean
    required: false
    description: If `true`, uses the Tudor crown from King Charles III's royal cypher. Otherwise, uses the St. Edward's crown. Default is `true`.
    deprecated: '5.2.0'
  - name: rebrand
    type: boolean
    required: false
    description: If `true`, use the redesigned header and new GOV.UK logotype. Default is `false`.

previewLayout: full-width
accessibilityCriteria: |
  Text and links in the Header must:
  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)

  Links in the Header must:
  - accept focus
  - be focusable with a keyboard
  - be usable with a keyboard
  - indicate when they have focus
  - change in appearance when touched (in the touch-down state)
  - change in appearance when hovered
  - have visible text

  Images in the Header must:
  - be presentational when linked to from accompanying text (crown icon).

  Landmarks and Roles in the Header should:
  - have a role of `"banner"` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)

examples:
  - name: default
    screenshot:
      variants:
        - default
        - no-js
    description: The standard header as used on information pages on GOV.UK
    options: {}

  - name: with service name
    description: If your service is more than a few pages long, you can help users understand where they are by adding the service name.
    options:
      serviceName: Service Name
      serviceUrl: '/components/header'

  - name: with service name but no service url
    options:
      serviceName: Service Name

  - 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

  - 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

  - name: with custom menu button text
    description: Button translated into Welsh
    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

  - 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

  - name: with service name and navigation
    description: If you need to include basic navigation, contact or account management links.
    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

  - name: with large navigation
    description: An edge case example with a large number of navigation items with long names used to test wrapping
    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

  - name: with product name
    options:
      navigationClasses: govuk-header__navigation--end
      productName: Product Name

  - name: full width
    options:
      containerClasses: govuk-header__container--full-width
      navigationClasses: govuk-header__navigation--end
      productName: Product Name

  - 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

  - name: with full width border
    description: Makes the header's bottom border full width without affecting the header's content. Removed with redesign.
    options:
      classes: govuk-header--full-width-border
      productName: Product Name

  - name: navigation item with html
    options:
      serviceName: Service Name
      serviceUrl: '/components/header'
      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>

  - 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

  - name: with St. Edward's Crown
    description: Does not work if the rebrand is enabled.
    options:
      useTudorCrown: false

  # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
  - name: attributes
    hidden: true
    options:
      attributes:
        data-test-attribute: value
        data-test-attribute-2: value-2
  - name: classes
    hidden: true
    options:
      classes: app-header--custom-modifier
  - name: custom homepage url
    hidden: true
    options:
      homepageUrl: /
  - name: navigation item with attributes
    hidden: true
    options:
      navigation:
        - href: /link
          text: Item
          attributes:
            data-attribute: my-attribute
            data-attribute-2: my-attribute-2
  - name: navigation item with html as text
    hidden: true
    options:
      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>
  - name: navigation item with html without link
    hidden: true
    options:
      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>
  - name: with custom navigation label and custom menu button text
    hidden: true
    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
  - name: empty navigation array
    hidden: true
    options:
      navigation: []
  - name: rebrand
    hidden: true
    options:
      rebrand: true