Skip to main content



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.

Image showing nsx-header open with subheadings and links

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.


View example on Storybook

Component placement#

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


sectionssectionsarraySubheadings and links for each nav section
hide-a11y-btnhideA11yBtnbooleanfalseAbility to turn off Reciteme
header-clickSends an event when a link is clicked. { text: 'Link text', href: 'Link href', header: 'Header', subheader: 'Sub Header' }
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"


  • 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

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.