Header

Anatomy

The Header component is designed to be flexible and adaptable, supporting various layouts and configurations. It includes the following key elements/configuration options:

• Header - Default, small or simplified variations
• MegaMenu or dropdown sub-menus
• A CallOut pane within the MegaMenu
• Off-canvas Drawer
• Icon links
• Call-to-action button
• Phone number
• Ribbon
• Configurable container width

All of these elements can be configured through the data prop, allowing you to customize the header to fit your application's needs. In the case of the global header, the data is fetched from our nav-data API and override props can be used to customize the header's appearance and behavior.

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.