Skip to content
Nucleus Docs

Header

<ns-header>
Overview Guidance Implementation

Overview

Primary navigation for the website.

Examples

Configure

Guidance

Implementation

Placement

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

Specification

Attributes

primary

Property
primary
Description
The primary navigation array of objects.
Type
Array

secondary

Property
secondary
Description
The secondary navigation array of objects.
Type
Array

secondary-banner

Property
secondaryBanner
Description
The secondary banner array of objects.
Type
Array

menu-banner

Property
menuBanner
Description
The menu banner array of objects.
Type
Array

quick-links

Property
quickLinks
Description
The quick links array of objects.
Type
Array

skip-subdomain

Property
skipSubdomain
Type
string

logo

Property
logo
Description
The URL of the logo.
Type
string
Default
https://www.britishgas.co.uk/nucleus/images/logo.svg

alt

Property
alt
Description
The alt text of the logo.
Type
string
Default
British Gas

hide-links

Property
hideLinks
Description
Whether the links should be hidden.
Type
boolean
Default
false

no-root-link

Property
noRootLink
Description
Whether the root link in the logo should be hidden.
Type
boolean
Default
false

type

Property
type
Type
string
Default
header

Slots

SlotPermitted tagsDescription
Anonymous slotDynamic slot for links to override links or utilise for frameworks.

Events

NameDescription
header-init
header-click

This page covers most of the ways you can use ns-header. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content: