Skip to content
Nucleus Docs

Header

<nsx-header>
Overview Guidance Implementation

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
Property
quickLinks
Type
array
hide-a11y-btn
Property
hideA11yBtn
Description
The toggle to hide the accessibility button.
Type
boolean
Default
false
type
Property
type
Description
The type of the header.
Type
string
Options
standard business
Default
standard

Slots

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

Events

NameDescription
header-clickDispatched 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: