Skip to content
Nucleus Docs

Header

<ns-header>
Overview Guidance Implementation

Overview

Primary navigation for the website.

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.

Examples

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 primary navigation array of objects.
Type
Array

secondary

Property
secondary
Description
The secondary navigation array of objects.
Type
Array

secondary-banner

Property
secondaryBanner
Description
The secondary banner array of objects.
Type
Array

menu-banner

Property
menuBanner
Description
The menu banner array of objects.
Type
Array

quick-links

Property
quickLinks
Description
The quick links array of objects.
Type
Array

skip-subdomain

Property
skipSubdomain
Type
string

logo

Property
logo
Description
The URL of the logo.
Type
string
Default
https://www.britishgas.co.uk/nucleus/images/logo.svg

alt

Property
alt
Description
The alt text of the logo.
Type
string
Default
British Gas

hide-links

Property
hideLinks
Description
Whether the links should be hidden.
Type
boolean
Default
false

no-root-link

Property
noRootLink
Description
Whether the root link in the logo should be hidden.
Type
boolean
Default
false

type

Property
type
Type
string
Default
header

Slots

SlotPermitted tagsDescription
Anonymous slotDynamic slot for links to override links or utilise for frameworks.

Events

NameDescription
header-init
header-click

Specification notes

  • 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.
Alt

This is the alt for the logo, so should be the company name.

Add this attribute when there is no navigational links (when there is nothing in the anonymous slot).

  • This is a dynamic slot.
  • This must follow a flat DOM structure of just an anchor tag.
  • The suffix of the slot corresponds to the the data-link attribute value on the link you want to take over.
  • The link should be given text content and should correlate to what the link text content was previously.
Primary structure

This is an array of each navigation section. Each navigation section is an object.

Each section:

  • heading
  • href
  • subheading
    • heading
    • links
      • text
      • href
      • data-link
[
  {
    "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
[
  {
    "text": "Help & Support",
    "href": "/help-and-support"
  }
]

Last updated: