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.
|💚 Do's||💔 Don'ts|
|Use on the British Gas website.||Use for partnership or micro sites.|
|Keep the header outside the ||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
footerto your footer (nsx-footer adds one automatically). This is required for the skip links.
- Remember to add an id of
contentto the main content of the page (normally the
mainelement). This is required for the skip links.
The nsx-header component can only be used as a child of the
|Subheadings and links for each nav section|
|Ability to turn off Reciteme|
|Sends an event when a link is clicked. |
#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.
"heading": "Gas & electricity",
"text": "Gas & electricity services",
"text": "Our gas & electricity tariffs",
"text": "Get a quote",
"text": "Connections for new builds",
"text": "Warm Home Discount",
- 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.