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.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

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

<Header variation="nz" />

<Header variation="nz" />

SmallHeader

SmallHeader has a baked-in ModeProvider

The SmallHeader has a nested ModeProvider at the root of the component with a mode of "default". As such, the component does not respond to any external ModeProviders.

jsx

<SmallHeader variation="arhi" invert={false} />

<SmallHeader variation="arhi" invert={false} />

PortalHeader

jsx

<PortalHeader
  navLinks={navLinks}
  iconLinks={iconLinks}
  withContainer={false}
  isSingleTier={false}
  logoLinkProps={{href: '/', id: 'ga-nav-logo'}}
  activePage="nav-item"
  drawerChildren={
    <SecondaryButton href="#" fullWidth>
      Log out
    </SecondaryButton>
  }
/>

<PortalHeader
  navLinks={navLinks}
  iconLinks={iconLinks}
  withContainer={false}
  isSingleTier={false}
  logoLinkProps={{href: '/', id: 'ga-nav-logo'}}
  activePage="nav-item"
  drawerChildren={
    <SecondaryButton href="#" fullWidth>
      Log out
    </SecondaryButton>
  }
/>

Props

Header

Prop	Type	Default	Description
`variation`	string	`arhi`	Which version of the header to use. One of `arhi`, `nz`, `shareholders`, `international`, `foundation`, `providers`.
`enableSearch`	boolean	`false`	When enabled, a search icon link will be shown. Clicking this link will open the nib `/search` page.
`hidePhoneNumber`	boolean	`false`	Whether or not to render the phone number link in the Header.
`isCorporate`	boolean	`false`	Use the corporate phone number from the variation config, if it exists. Otherwise use default.
`invertSmallHeader`	boolean	`false`	Whether to apply the `invert` prop to the `SmallHeader` when it is displayed on a screen below the XL breakpoint.
`withAbsoluteLinks`	boolean	`false`	Whether or not header link urls should be absolute.
`absoluteBaseUrl`	string		To be used in conjunction with `withAbsoluteLinks`. Each variation has a default baseUrl in config. This is to override that default.

SmallHeader

Prop	Type	Default	Description
`variation`	string		Which version of the small header to use. One of `arhi`, `nz`, `shareholders`, `international`, `foundation`, `providers`.
`logoLink`	string		The `href` value for the SmallHeader logo. Will override the url provided by the `variation`.
`enableSearch`	boolean	`false`	When enabled, a search icon link will be shown. Clicking this link will open the nib `/search` page.
`hidePhoneNumber`	boolean	`false`	Whether or not to render the phone number link in the Header.
`showMenu`	boolean	`false`	Determines whether a menu button should be present in the header which opens an off-canvas drawer containing navigation items.
`isCorporate`	boolean	`false`	Use the corporate phone number from the variation config, if it exists. Otherwise use default.
`invert`	boolean	`false`	Whether to reverse the background and logo.
`withAbsoluteLinks`	boolean	`false`	Whether or not header link urls should be absolute.
`absoluteBaseUrl`	string		To be used in conjunction with `withAbsoluteLinks`. Each variation has a default baseUrl in config. This is to override that default.

PortalHeader

Prop	Type	Default	Description
`navLinks`	array		A list of text links to include in the header. Each item in the array should match the below structure.
`iconLinks`	array		A list of icon and text links to include in the header. Each item in the array should match the below structure.
`withContainer`	boolean	`false`	Whether to restrict the portal header contents to our standard container width. By default the PortalHeader will span the entire screen.
`isSingleTier`	boolean	`false`	Whether 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.
`logoLinkProps`	object	`{href: '/', id: 'ga-nav-logo'}`	An object of props to pass down to the logo link.
`activePage`	string		A string that matches against a navLink `slug` property.
`drawerChildren`	node		Optionally render a component below the nav links inside the drawer. Often used to render a Log out button.
`navSlot`	node		A special slot to be used by the `OSNav`
`logo`	node or func		A custom logo component or text component etc that will replace the default mesh logo component.

navLinks

Each navLink must match the following shape:

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

An example navLink:

{
  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: '#'
    }
  ]
}

iconLinks

Each iconLink must match the following shape:

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:

{
  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 preferred 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.

Edit this page

Header

Headers should not be used as a standalone component

Installation

Usage

Interactive demo

Header

SmallHeader

SmallHeader has a baked-in ModeProvider

PortalHeader

Props

Header

SmallHeader

PortalHeader

navLinks

iconLinks

Considerations

Inverted (reversed) SmallHeader

PortalHeader has no variations

Related components