Header

Overview

Navigation segments contained within the header.

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

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

Implementation

Placement

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

Specification

Attributes

`sections`

Property: sections
Description: The list of heading sections to display in the header. Each section can have list of links.
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: The toggle to hide the accessibility button.
Type: boolean
Default: false

`type`

Property: type
Type: string
Default: standard

Slots

Slot	Permitted tags	Description
Anonymous slot		The 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"
        }
      ]
    },
    ...
  ],
  ...
]

Last updated: Mar 27, 2024