Overview

Navigation segments contained within the header.

The header experience pattern internally holds the sections and the secondary navigation.

The subheadings and links for the navigation are passed into each section of the nsx-header to allow them to be quickly updated.

Examples

Configure

Guidance

Do

• Use on the British Gas website.
• Keep the header outside the main element.
• Keep the header at the top.

Don't

• Use for partnership or micro sites.
• Only have heading links.

Implementation

Placement

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

Specification

Attributes

sections

Property

sections

Description

The heading sections to display in the header.

Type

Array

secondary-banner

Property

secondaryBanner

Type

array

menu-banner

Property

menuBanner

Type

array

quick-links

Property

quickLinks

Type

array

hide-a11y-btn

Property

hideA11yBtn

Description

Whether to hide the accessibility button.

Type

boolean

Default

false

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		Dynamic slot for links to override links or utilise for frameworks.

Events

Name	Description
header-click	Dispatched when a link is clicked.

Specification notes

Section structure

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