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