馃摚
Have your say in our Mesh survey
Skip to content
Stable

Header

The Header component is our primary page header. It should be used on all pages except for focused content and sales funnel pages which should use the Small Header component. When combining this component with the Footer component, use the Header Footer Layout component instead.

Headers should not be used as a standalone component

Headers should almost never be used as an standalone component as the full off-canvas pattern would still need to be constructed. Header Footer Layout should be used in most circumstances.

Installation

bash
npm install @nib-components/header

Note: You will also need to install the peerDependencies @nib-components/button and @nib-components/theme.

Usage

jsx
import Header from '@nib-components/header';
// or
import {SmallHeader} from '@nib-components/header';
// or
import {PortalHeader} from '@nib-components/header';

Interactive demo

jsx

SmallHeader

jsx

PortalHeader

jsx

Props

Header

PropTypeDefaultDescription
variationstringarhiWhich version of the header to use. One of arhi, nz, shareholders, international, foundation, providers.
searchOnClickfunctionThe onClick function applied to the Search button in the header. If this is empty, the Search button will not be displayed.
isCorporatebooleanfalseUse the corporate phone number from the variation config, if it exists. Otherwise use default.
invertSmallHeaderbooleanfalseWhether to apply the invert prop to the SmallHeader when it is displayed on a screen below the XL breakpoint.

SmallHeader

PropTypeDefaultDescription
variationstringWhich version of the small header to use. One of arhi, nz, shareholders, international, foundation, providers.
logoLinkstringThe href value for the SmallHeader logo. Will override the url provided by the variation.
searchOnClickfunctionThe onClick function applied to the Search button in the small header. If this is empty, the Search button will not be displayed.
showMenubooleanfalseDetermines whether a menu button should be present in the header which opens an off-canvas drawer containing navigation items.
isCorporatebooleanfalseUse the corporate phone number from the variation config, if it exists. Otherwise use default.
invertbooleanfalseWhether to reverse the background and logo.

PortalHeader

PropTypeDefaultDescription
navLinksarrayA list of text links to include in the header. Each item in the array should match the below structure.
iconLinksarrayA list of icon and text links to include in the header. Each item in the array should match the below structure.
withContainerbooleanfalseWhether to restrict the portal header contents to our standard container width. By default the PortalHeader will span the entire screen.
isSingleTierbooleanfalseWhether to vertically condense the PortalHeader to a single bar, with navLinks and iconLinks alongside one another. By default iconLinks appear to the right of the logo, with navLinks in a second tier below. Ensure single tier is only used with a small number of links as it must fit on a 960px screen. Too many links will cause horizontal overflow and scrolling.
logoLinkPropsobject{href: '/', id: 'ga-nav-logo'}An object of props to pass down to the logo link.
activePagestringA string that matches against a navLink slug property.
drawerChildrennodeOptionally render a component below the nav links inside the drawer. Often used to render a Log out button.
navSlotnodeA special slot to be used by the OSNav
logonode or funcA custom logo component or text component etc that will replace the default mesh logo component.

Each navLink must match the following shape:

ts
interface NavLink {
id: string;
title: string;
slug: string;
url: string;
children?: NavLink[]
[key: string]: unknown; // other props
}

An example navLink:

js
{
id: 'ga-nav-themes',
title: 'Nav item 4 w/ dropdown',
slug: 'nav-item-4',
url: '#',
children: [
{
id: 'ga-nav-ni4-sub-item',
title: 'Sub-item',
url: '/health-insurance/singles'
},
{
id: 'ga-nav-ni4-sub-item-2',
title: 'Sub-item with a longer label',
url: '#'
}
]
}

Each iconLink must match the following shape:

ts
interface IconLink {
id: string;
title: string;
slug: string;
url: string;
icon: MeshSystemIcon;
as?: string | function;
onClick?: function;
[key: string]: unknown; // other props
}

An example iconLink:

js
{
id: 'ga-nav-phone',
title: '13 16 42',
slug: 'phone',
url: 'tel:131642',
icon: PhoneSystemIcon
}

iconLinks do not support children (dropdowns).

Considerations

By default, the Header will collapse to become the SmallHeader when below the width of the xl breakpoint (960px). The Navigation items from the Header will be passed down and used to populate the Drawer within the SmallHeader.

When using the standalone SmallHeader, consider the following usecases:

  • User flows that have a direct navigation path, such as sales funnels.
  • When content being displayed requires a user's focus.
  • For standalone marketing pages that do not require navigation.

Inverted (reversed) SmallHeader

By default, the SmallHeader has a white background allowing the primary version of the brand's logo to be used. This default colouring should be preferenced over the inverted option in the majority of cases.

In certain layouts where the page is very white/light grey and the default white header loses its impact, the inverted option can be used to aid brand recognition.

PortalHeader has no variations

The PortalHeader behaves a little differently to the other header components. It does not have pre-baked variations for you to pick from. Instead you must supply the config to populate the links and icon links.