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 | Type | Default | Options | Description |
---|---|---|---|---|
primary | array | Primary navigation heading, subheadings and links | ||
secondary | array | Secondary navigation links and buttons | ||
logo | string | https://www.britishgas.co.uk/nucleus/images/logo.svg | URL to point to logo | |
alt | string | British Gas | Alternative text for logo | |
hide-links | boolean | false | true ,false | Hide navigation and related navigational elements |
no-root-link | boolean | false | true ,false | Remove the link from the logo |
skip-subdomain | 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 structureDesign Tokens
You can change the branded look and feel of the ns-header by modifying these options in the design tokens.
Read more about design tokens in our getting started guide.
{
"background-color": "#FFFFFF",
"color": "#111518",
"focus-outline-color": "#FFC72C",
"border-color": "#C3CED5 ",
"nav-toggle": {
"color": "#111518"
},
"nav-skip": {
"background-color": "#FFFFFF",
"color": "#111518",
"typography": "p-small"
},
"mobile": {
"nav-heading-background-color": "#FFFFFF",
"nav-panel": {
"background-color": "#F3F5F7",
"color": "#111518",
"typography": "heading-5"
},
"heading-text-typography": "heading-5",
"button-link": {
"background-color": "#FFFFFF",
"color": "#004ECC"
}
},
"desktop": {
"nav-flyout": {
"theme": "navy",
"key-links": {
"theme": "slate"
}
},
"header": {
"typography": "action"
},
"link": {
"typography": "p-normal-regular"
},
"side-headers": {
"color": "#111518",
"text-decoration-color": "#111518",
"typography": "p-small"
},
"menu-headers-text-decoration-color": "#004ECC",
"key-links": {
"typography": "action",
"icon": {
"spacer": {
"outside-right": "0.25rem"
}
}
}
},
"border-width": "0.0625rem"
}
#
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.