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/icons, @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.
enableSearchbooleanfalseWhen enabled, a search icon link will be shown. Clicking this link will open the nib /search page.
hidePhoneNumberbooleanfalseWhether or not to render the phone number link in the Header.
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.
withAbsoluteLinksbooleanfalseWhether or not header link urls should be absolute.
absoluteBaseUrlstringTo be used in conjunction with withAbsoluteLinks. Each variation has a default baseUrl in config. This is to override that default.

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.
enableSearchbooleanfalseWhen enabled, a search icon link will be shown. Clicking this link will open the nib /search page.
hidePhoneNumberbooleanfalseWhether or not to render the phone number link in the Header.
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.
withAbsoluteLinksbooleanfalseWhether or not header link urls should be absolute.
absoluteBaseUrlstringTo be used in conjunction with withAbsoluteLinks. Each variation has a default baseUrl in config. This is to override that default.

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 | JSX.Element;;
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.