Header
<nsx-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
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: