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.

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` element	Only 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#

Attribute	Property	Type	Default	Options	Description
`sections`	`sections`	`array`			Subheadings and links for each nav section
`hide-a11y-btn`	`hideA11yBtn`	`boolean`	`false`		Ability to turn off Reciteme

Event	Description
`header-click`	Sends an event when a link is clicked. `{ text: 'Link text', href: 'Link href', header: 'Header', subheader: 'Sub Header' }`

Slots	Type
`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

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.