Skip to main content

ns-header

Introduction#

Primary 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 partnerMake your own header if you are part of the customer facing website.
Follow the correct structure for the navigation linksAdd personalisation links into the navigation, as this can have an SEO issue.
Have a header on every pageLoad 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#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
primaryarrayPrimary navigation heading, subheadings and links
secondaryarraySecondary navigation links and buttons
logostringhttps://www.britishgas.co.uk/nucleus/images/logo.svgURL to point to logo
altstringBritish GasAlternative text for logo
hide-linksbooleanfalsetrue,falseHide navigation and related navigational elements
no-root-linkbooleanfalsetrue,falseRemove the link from the logo
skip-subdomainstringRemove subdomain from root URL
EventDescription
header-clickSends an event when a link is clicked. { text: 'Link text', href: 'Link href', header: 'Header', subheader: 'Sub Header' }
SlotsType
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 structure#

This is an array of each navigation section. Each navigation section is an object.

Each section:

  • heading
  • href
  • subheading
    • heading
    • links
      • text
      • href
      • data-link
[
{
"heading": "Energy",
"href": "/energy.html",
"subheadings": [
{
"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"
}
]
},
...
]
},
...

Secondary navigation structure#

[
{
"text": "Help & Support",
"href": "/help-and-support"
}
]

Design 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.

Edit this page