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

Figma

Please note: The ns-header Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).

Last updated: Oct 28, 2024