ns-header
#
IntroductionPrimary navigation for the website
The header provides the primary navigation for the website, whilst also being our main brand presence with the logo.
NOTE: This is the UI component for the header - if you are looking for the header with the navigational content please use
nsx-header
.
The default choice of header across the main British Gas UK home site should be the nsx-header.
#
Best practice๐ Do's | ๐ Don'ts |
---|---|
Create your own header if you are a micro site or external partner | Make your own header if you are part of the customer facing website. |
Follow the correct structure for the navigation links | Add personalisation links into the navigation, as this can have an SEO issue. |
Have a header on every page | Load links from an API of external source as this has a performance impact. |
Add the header inside the main element. |
#
Considerations of best practice- There needs to be a very good reason to use this component instead of
nsx-header
. - If changing the logo - use an SVG. Make sure that the SVG has been compressed.
- Logo can only have a max height of
62px
i.e. the British Gas logo is 160px x 62px
#
Usage#
Component placementThe ns-header component can only be used as a child of the <main>
element
#
SpecificationAttribute | Property | Type | Default | Options | Description |
---|---|---|---|---|---|
primary | primary | array | Primary navigation heading, subheadings and links | ||
secondary | secondary | array | Secondary navigation links and buttons | ||
logo | logo | string | https://www.britishgas.co.uk/nucleus/images/logo.svg | URL to point to logo | |
alt | alt | string | British Gas | Alternative text for logo | |
hide-links | hideLinks | boolean | false | true , false | Hide navigation and related navigational elements |
no-root-link | noRootLink | boolean | false | true , false | Remove the link from the logo |
skip-subdomain | skipSubdomain | string | Remove subdomain from root URL |
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#
Logo- Only change if the header will be used in a non British Gas journey, for example a partnership with Bord Gais.
- Remember to give a new
alt
value. - Logo can only have a max height of
62px
i.e. the British Gas logo is 160px x 62px. - Hosting of the logo should be within our own systems not pointing to an outside resource.
#
Alt- This is the alt for the logo, so should be the company name.
#
Hide links- Add this attribute when there is no navigational links (when there is nothing in the anonymous slot).
#
Dynamic link slot- This is a dynamic slot.
- This must follow a flat DOM structure of just an anchor tag.
- The suffix of the slot corresponds to the the
data-link
attribute value on the link you want to take over. - The link should be given text content and should correlate to what the link text content was previously.
#
Primary structureThis is an array of each navigation section. Each navigation section is an object.
Each section:
heading
href
subheading
heading
links
text
href
data-link
#
Secondary navigation structure#
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.