Header

Overview

Primary navigation for the website.

✨ This is an auto-generated AI summary of the ns-header's documentation. It may not be accurate. ✨

The header provides the primary navigation and conveys brand presence with the logo.

The nsx-header should be the default choice of header across the main British Gas website.

The primary navigation with grouped links.

Configure

Guidance

Implementation

Placement

The ns-header component can only be used as a child of the <main> element.

Specification

Attributes

`primary`

Property: primary
Description: The list of primary navigation link objects. The list can be flat or nested.
Type: Array

`secondary`

Property: secondary
Description: The list of secondary navigation link objects.
Type: Array

`secondary-banner`

Property: secondaryBanner
Description: The list of secondary banner link objects.
Type: Array

`menu-banner`

Property: menuBanner
Description: The list of menu banner link objects.
Type: Array

`quick-links`

Property: quickLinks
Description: The list of quick links objects. Each quick link can have nested links.
Type: Array

`skip-subdomain`

Property: skipSubdomain
Type: string

`logo`

Property: logo
Description: The link to the logo image.
Type: string
Default: https://www.britishgas.co.uk/nucleus/images/logo.svg

`alt`

Property: alt
Description: The alternate text of the logo image and needs to be the company name.
Type: string
Default: British Gas

`hide-links`

Property: hideLinks
Description: The toggle to hide links in the header.
Type: boolean
Default: false

`no-root-link`

Property: noRootLink
Description: The toggle to hide the root link in the logo.
Type: boolean
Default: false

`type`

Property: type
Description: The type of the header.
Type: string
Options: standard simple
Default: header

Slots

Slot	Permitted tags	Description
Anonymous slot		` attribute in the link to override. The slot value needs to be correlated to the link value to be overridden.

Events

Name	Description
`header-init`
`header-click`

Specification notes

Logo

Only change if the header will be used in a non British Gas journey, for example a partnership with Bord Gais.
Remember to give a new alt value.
Logo can only have a max height of 62px i.e. the British Gas logo is 160px x 62px.
Hosting of the logo should be within our own systems not pointing to an outside resource.

Primary structure

The structure of each navigation link object.

heading
href
subheading
- heading
- links
  - text
  - href
  - data-link

An example for nested primary link objects.

[
  {
    "heading": "Energy",
    "href": "/energy.html",
    "subheadings": [
      {
        "heading": "Gas & electricity",
        "links": [
          {
            "text": "Gas & electricity services",
            "href": "/energy.html"
          },
          {
            "text": "Our gas & electricity tariffs",
            "href": "/energy/gas-and-electricity.html"
          },
          {
            "text": "Get a quote",
            "href": "/GetAQuote/"
          },
          {
            "text": "Connections for new builds",
            "href": "/energy/gas-and-electricity/new-connections.html"
          },
          {
            "text": "Warm Home Discount",
            "href": "/energy/energy-saving/warm-home-discount.html"
          }
        ]
      },
      ...
    ]
  }
  ...
]

Secondary structure

An example secondary link objects.

[
  {
    "text": "Help & Support",
    "href": "/help-and-support"
  }
]

Last updated: Mar 27, 2024