Skip to main content

nsx-header

Introduction#

Primary navigation for the British Gas website

This experience pattern is a wrapper of the ns-header. The header experience pattern internally holds the sections and the secondary navigation.

The subheadings and links for the navigation can be passed in for each section to allow them to be quickly updated.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use on the British Gas website.Use for partnership or micro sites.
Keep the header outside the main elementOnly have heading links
Keep the header at the top

Considerations of best practice#

  • If not using nsx-footer; remember to add an id of footer to your footer (nsx-footer adds one automatically). This is required for the skip links.
  • Remember to add an id of content to the main content of the page (normally the main element). This is required for the skip links.

Usage#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
sectionsarraySubheadings and links for each nav section
hideA11yBtnbooleanfalseAbility to turn off Reciteme
EventDescription
header-clickSends an event when a link is clicked. { text: 'Link text', href: 'Link href' }
SlotsType
link-*a tag

Specification notes#

Dynamic link slot#

  • This needs to follow the correct structure.
  • This is a dynamic slot.
  • This must follow a flat DOM structure of just an anchor tag.

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

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!