Header

Anatomy

The Header should not be regarded as a component or package in itself, but as an assembly of subcomponents, designed to support a range of configurations across breakpoints, devices and contexts. Subcomponents are listed below, each having their own configurable props, applications and constraints.

HeaderBody

The HeaderBody is the primary masthead that tells a user whose website they are using, and provides immediate access to common navigation tasks. It contains a Logo, CTA, up to 3 iconLinks, and a provision for a phone number (that can be selectively hidden via prop).

IconLinks are designed to enable quick access to high level, persistent tasks like search, login (or logout), and profile/settings information, while the CTA is designed to be a shortcut to the primary intent of to a given context e.g. “Get a quote”.

A HeaderBody contains three layout variations - default (as pictured above) for desktop experiences, small and simplified.

The small variation (pictured below) is designed for smaller viewports, or focused desktop environments where access to iconLinks and/or the Nav is still required.

Lastly, the simplified variation features only a logo. It is intended for contexts where a user’s ability to navigate out of the experience might be detrimental to its primary purpose, or where a user’s focus should directed to in-page content.

NavBar

The NavBar provides an interactive array of top-level links to content. NavLinks may be standalone, directing to a single URL, or can function as a means to expose multiple subitems and/or subgroups (via the Dropdown and Megamenu, respectively). On viewports below xl, any items in the NavBar are collapsed into the Drawer, accessed via the menu icon in the HeaderBody.

When a config specifies use of the small variation of the HeaderBody on viewports above xl, a special variation of the NavBar is applied, with the primary CTA Button integrated alongside any right-aligned NavLinks.

Dropdown

The Dropdown serves as a way of displaying smaller, single-layer sets of navLinks instead of the larger-format Megamenu. It can only be triggered from a top-level NavLink in the NavBar, and should contain no less than 2 and no more than 7 items.

Megamenu

The Megamenu is designed to contextualise and organise large banks of navigation links, with group headings, a CTAPanel and optional subtitles for child links. It can only be triggered by a top-level Navlink from the NavBar, displaying as an overlay atop page content. The CTAPanel (or Callout) is designed to display marketing content and/or a contextual summary of the navigation links displayed, along with a configurable CTA.

To encourage an effective and usable selection of relevant links, the Megamenu is designed to only display up to 3 columns of links, with 5 to 7 items considered to be the ideal number of children in any column.

Drawer & Sidebar

In certain configurations or at particular breakpoints, the navBar can be swapped out or hidden in favour of specialised components designed for those contexts.

The Drawer is a mobile-friendly reinterpretation of the Header’s navigation controls, adapting iconLinks, navLinks, ribbonLinks and the CTA into an overlay that ‘slides out’ from the side of smaller viewports.

Similarly, the Sidebar also adapts the NavBar’s link structure to a persistent side panel on larger breakpoints, with expanding sub-groups for nested links. It is designed to enable easy user access to complex IAs or “jobs to be done” in contexts like dashboards or member platforms. Like the Navbar, it is hidden below the xl breakpoint, displaying the Drawer instead.

Ribbon

The Ribbon is a tertiary set of end-aligned links to be displayed above the HeaderBody. This component configuration should be used sparingly, and only for contexts where a user may not fit the expected persona within a specialised experience (for example, a health insurance customer who has inadvertently navigated to a microsite for shareholders).

On viewports below the xl breakpoint, any Ribbon links supplied in the config will be displayed in the Drawer, stacked beneath any NavLinks.

Installation

npm install @nib/nav-layout

Usage

This package has multiple exports depending on the type of header you want to use.

Importantly, this component supports our "global" header, which is used across all public nib websites, as well as any custom headers you may want to create for your applications.

Global Header

For the global header, you should use the ServerHeader component which has data-fetching built-in, as well as fallback data for when the API is unavailable.

import {ServerHeader} from '@nib/nav-layout/header/server';

const MyHeader = () => {
  return <ServerHeader />;
};

The ServerHeader shares the same props as the client Header component, with a couple of exceptions. Since it automatically fetches the necessary data from the API, you cannot pass a data prop. Additionally, two extra props are available to configure the data fetching and caching behavior:

If you are unable to use the server component to render the global header, you must ensure that the data is fetched either at build time or on the server. The global header should not have to wait for client-side data fetching, as this is a poor user experience.

Manually fetching data

We provide a getNavData function to help you fetch the data from the API. This function can be used in your server-side code or during build time to retrieve the header data.

import {getNavData} from '@nib/nav-layout/getNavData';

const headerData = await getNavData({endpoint, fetchOptions}); // optional parameters

Custom Header

For custom headers, you will likely need to use our client Header component. Our ServerHeader component can be configured to fetch data from a different URL, but the fallback behaviour is fixed to the global header data.

If fetching data, we recommend creating your own server component that fetches the data you need and passes it to the client Header component. This way, you can ensure that your custom header is rendered with the correct data without relying on client-side fetching.

When using the client Header component, you must provide the data prop with the necessary header configuration. This data can be sourced from an API or defined locally, but it must match the expected structure.

import {Header} from '@nib/nav-layout/header';
import {headerData} from './data';

const MyHeader = () => {
  return <Header data={headerData} containerWidth="wide" hidePhoneNumber />;
};

<NavHeader
  data={{
    logo: {url: '/'},
    phoneNumber: '123 456',
    hidePhoneNumber: false,

    cta: {
      id: 'primary-cta',
      title: 'Get a quote',
      url: '/health-insurance/join/welcome',
      targetBlank: false
    },
    hideCta: false,

    variation: 'default',

    body: {
      mode: 'feature'
    },

    navBar: {
      mode: 'alt'
    },

    drawer: {
      top: {
        mode: 'feature'
      },
      body: {
        mode: 'default'
      }
    },

    iconLinks: [
      {
        id: 'search',
        title: 'Search',
        url: '/search',
        icon: 'Search'
      }
    ],
    hideIconLinks: false,

    navLinks: [
      {
        id: 'products',
        title: 'Products',
        variation: 'megaMenu',
        children: [
          {
            id: 'health',
            title: 'Health Insurance',
            children: [
              {id: 'singles', title: 'Singles Cover', url: '/health/singles'},
              {id: 'families', title: 'Families Cover', url: '/health/families'}
            ]
          },
          {
            id: 'extras',
            title: 'Extras Cover',
            children: [
              {id: 'dental', title: 'Dental', url: '/health/dental'},
              {id: 'optical', title: 'Optical', url: '/health/optical'}
            ]
          }
        ],
        callOut: {
          title: 'Compare our products',
          description: 'Find the right health cover for your needs.',
          primaryCta: {id: 'compare', title: 'Compare Now', url: '/compare'}
        }
      },
      {
        id: 'help',
        title: 'Help & Support',
        url: '/help'
      }
    ]
  }}
  containerWidth="wide"
  hidePhoneNumber
/>

import {Header} from '@nib/nav-layout/header';
import {customHeaderData} from './customData';
const MyCustomHeader = () => {
  return <Header data={customHeaderData} containerWidth="default" />;
};

Props

Apart from data which is required, all other props are optional and should be used to override config defined in the data prop.

Data

Data is what drives the header's content and structure. In the case of the ServerHeader, the data is fetched internally. For the client Header, you must provide the data prop with the necessary configuration. Regardless of how you use the header, the data structure is consistent and follows a specific format.

type HeaderData = {
  logo?: {
    url: string; // URL for the logo image
    label?: string; // Optional label for the logo, used for accessibility
  };
  phoneNumber?: string;
  hidePhoneNumber?: boolean;
  cta?: ItemType;
  hideCta?: boolean;
  ribbon?: {
    mode: string; // e.g. 'default', 'alt'
    links: ItemType[];
  };
  variation?: Variation; // e.g. 'default', 'small', 'simplified'
  body: {
    mode: ModeType | Record<string, ModeType>; // e.g. 'default', 'alt', 'feature'
  };
  navBar: {
    mode: ModeType | Record<string, ModeType>; // e.g. 'default', 'alt', 'feature'
  };
  drawer: {
    top: {
      mode: ModeType | Record<string, ModeType>; // e.g. 'default', 'alt', 'feature'
    };
    body: {
      mode: ModeType | Record<string, ModeType>; // e.g. 'default', 'alt', 'feature'
    };
  };
  iconLinks?: IconLinkType[];
  hideIconLinks?: boolean;
  navLinks: NavItems; // Main navigation structure
};

Editing the global header data

The global header data is managed in the nav-data repository, which serves as the source of truth for the public nib website's navigation configuration. If your team needs to make changes to the header configuration please raise a pull request in that repository.