Stable

NavLayout

The NavLayout is a top-level page layout component designed to orient a user, contextualise content and enable site-wide navigation. It contains a suite of navigation components like headers, footers, nav bars, dropdowns, sidebar etc. and can pass down preset configurations to each, via a navigation API.

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

Installation

bash

npm install @nib/nav-layout

Usage

This package contains two variations of the navLayout - a server side and a client side component. For pre-configured links and navigation structures, use the ServerNavLayout, or for custom configurations, use NavLayout.

Server NavLayout

The ServerNavLayout, has data-fetching built-in, along with fallback data for when the API is unavailable.

13 16 42

Help
Get a quote

Help
Get a quote

jsx

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

const NavLayout = () => {
  return <ServerNavLayout />;
};

The ServerNavLayout shares the same props as the client NavLayout 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:

Prop	Type	Default	Description
`endpoint`	string	`https://api-gateway.nib.com.au/nav-data/v1/config`	The URL from which to fetch the navdata data.
`fetchOptions`	object	`{cache: 'force-cache', next: {revalidate: false}}`	Options to customize the fetch and caching behavior.

If you are unable to use the server component to render the NavLayout, you must ensure that the data is fetched either at build time or on the server. The global NavLayout 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 nav-data.

jsx

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

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

Custom NavLayout

For custom NavLyout, you will likely need to use our client NavLayout component. Our ServerNavLayout component can be configured to fetch data from a different URL, but the fallback behaviour is fixed to the global nav-data.

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

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

jsx

import {NavLayout} from '@nib/nav-layout';
import {navData} from './data';

const MyNavLayout = () => {
  return <NavLayout data={navData} containerWidth="wide" hidePhoneNumber />;
};

jsx

<NavLayout
  data={{
    id: 'global-nav',
    containerWidth: 'default',
    withContainer: true,
    header: {
      logo: {
        url: '/'
      },
      phoneNumber: '13 16 42',
      hidePhoneNumber: false,
      cta: {
        id: 'primary-cta',
        title: 'Get a quote',
        url: '/health-insurance/join/welcome'
      },
      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: 'health-insurance',
          title: 'Health',
          variation: 'megaMenu',
          callOut: {
            title: 'Health insurance',
            description: 'Think of everything you could do with an nib health insurance membership.',
            primaryCta: {
              id: 'health-quote',
              title: 'Get a quote',
              url: '/health-insurance/join/welcome'
            },
            secondaryCta: {
              id: 'health-login',
              title: 'Login',
              url: 'https://my.nib.com.au/'
            }
          },
          children: [
            {
              id: 'find-health-cover',
              title: 'Find health cover',
              children: [
                {
                  id: 'health-insurance',
                  title: 'Health insurance',
                  url: '/health-insurance',
                  subtitle: 'Health insurance can include hospital, extras, or both combined.'
                },
                {
                  id: 'singles-cover',
                  title: 'Singles cover',
                  url: '/health-insurance/singles',
                  subtitle: 'Health cover for individuals.'
                },
                {
                  id: 'couples-cover',
                  title: 'Couples cover',
                  url: '/health-insurance/couples',
                  subtitle: 'Cover for both you and your partner.'
                },
                {
                  id: 'family-cover',
                  title: 'Family cover',
                  url: '/health-insurance/family',
                  subtitle: 'Comprehensive cover for the whole family.'
                },
                {
                  id: 'extras-cover',
                  title: 'Extras cover',
                  url: '/health-insurance/extras',
                  subtitle: 'Cover for dental, optical, physio and more.'
                },
                {
                  id: 'hospital-cover',
                  title: 'Hospital cover',
                  url: '/health-insurance/hospital',
                  subtitle: 'Peace of mind for the cost of hospital treatment.'
                },
                {
                  id: 'ambulance-cover',
                  title: 'Ambulance cover',
                  url: '/health-insurance/ambulance',
                  subtitle: 'Essential coverage for emergency ambulance.'
                },
                {
                  id: 'overseas-students',
                  title: 'Overseas students (OSHC)',
                  url: '/overseas-students',
                  subtitle: 'Health cover for international students.'
                },
                {
                  id: 'overseas-visitors',
                  title: 'Overseas visitors (OVHC)',
                  url: '/overseas-working-visitors',
                  subtitle: 'Coverage that meets overseas worker visa requirements.'
                }
              ]
            },
            {
              id: 'using-your-cover',
              title: 'Using health cover',
              children: [
                {
                  id: 'make-the-most-of-your-membership',
                  title: 'Make the most of your membership',
                  url: '/member-benefits',
                  subtitle: 'Benefits and services to help you save.'
                },
                {
                  id: 'preferred-provider-network',
                  title: 'Preferred provider network',
                  url: '/first-choice-network',
                  subtitle: 'Get No Gap or discounted rates with trusted health providers.'
                },
                {
                  id: 'find-a-provider',
                  title: 'Find a Provider',
                  url: '/find-a-provider',
                  subtitle: 'Search our network of trusted healthcare professionals.'
                },
                {
                  id: 'going-to-hospital',
                  title: 'Going to Hospital',
                  url: '/going-to-hospital',
                  subtitle: 'Do a cover check and see cost information for your procedure.'
                },
                {
                  id: 'health-insurance-in-australia',
                  title: 'Health insurance in Australia',
                  url: '/health-information',
                  subtitle: 'New or existing member? Discover the benefits of private health insurance.'
                },
                {
                  id: 'help-and-support',
                  title: 'Help and support',
                  url: '/help/health',
                  subtitle: 'Answers to common questions about managing your membership.'
                }
              ]
            },
            {
              id: 'wellbeing',
              title: 'Wellbeing',
              children: [
                {
                  id: 'health-and-wellbeing-support',
                  title: 'Health and wellbeing support',
                  url: '/healthy-living',
                  subtitle: 'Tools and services to support your health and wellbeing journey.'
                },
                {
                  id: 'telehealth',
                  title: 'Telehealth',
                  url: '/health-information/gp-telehealth',
                  subtitle: 'Consult with clinicians from the comfort of home.'
                },
                {
                  id: 'treatment-delivery',
                  title: 'Treatment delivery',
                  url: '/healthy-living/hub-health',
                  subtitle: 'Get treatments delivered or sent digitally to your phone.'
                },
                {
                  id: 'health-management-programs',
                  title: 'Health management programs',
                  url: '/health-management-programs',
                  subtitle: 'Programs to support specific health concerns and chronic conditions.'
                },
                {
                  id: 'healthcheck',
                  title: 'HealthCheck',
                  url: '/healthy-living/healthcheck',
                  subtitle: 'Assess your health with our free online tool.'
                },
                {
                  id: 'the-check-up',
                  title: 'The Check Up articles',
                  url: '/the-checkup',
                  subtitle: 'Tips and insights to support your health and wellbeing.'
                },
                {
                  id: 'join-nib-for-free',
                  title: 'Join nib for free',
                  url: '/free-membership',
                  subtitle: 'Download the nib App for free to unlock rewards, tools and more.'
                }
              ]
            }
          ]
        },
        {
          id: 'travel-insurance',
          title: 'Travel',
          variation: 'megaMenu',
          callOut: {
            title: 'Travel insurance',
            description: 'Travelling soon? Browse our travel insurance cover options to find the right protection for your trip.',
            primaryCta: {
              id: 'travel-quote',
              title: 'Get a quote',
              url: 'https://www.nibtravelinsurance.com.au/travel-insurance-quote'
            },
            secondaryCta: {
              id: 'travel-login',
              title: 'Login',
              url: 'https://www.nibtravelinsurance.com.au/account'
            }
          },
          children: [
            {
              id: 'find-travel-cover',
              title: 'Find travel cover',
              children: [
                {
                  id: 'travel-insurance',
                  title: 'Travel insurance',
                  url: '/travel-insurance',
                  subtitle: 'Get cover for your next vacation, international or domestic.'
                },
                {
                  id: 'domestic',
                  title: 'Domestic Travel',
                  url: '/travel-insurance/plans/domestic',
                  subtitle: 'Insurance cover for trips close to home.'
                },
                {
                  id: 'international',
                  title: 'International Travel',
                  url: '/travel-insurance/plans/international',
                  subtitle: 'Cover that takes you across the seas.'
                },
                {
                  id: 'annual',
                  title: 'Annual Multi Trip',
                  url: '/travel-insurance/plans/annual-travel-insurance',
                  subtitle: 'Get 12 months of cover, up to 45 days per trip.'
                },
                {
                  id: 'travel-offers',
                  title: 'Travel offers',
                  url: '/travel-insurance/campaigns',
                  subtitle: 'Check the latest campaigns and offers from nib travel insurance.'
                }
              ]
            },
            {
              id: 'using-travel-cover',
              title: 'Using travel cover',
              children: [
                {
                  id: 'what-we-cover',
                  title: 'What we cover',
                  subtitle: 'Learn about our range of travel insurance plans.',
                  url: '/travel-insurance/what-we-cover'
                },
                {
                  id: 'make-a-claim',
                  title: 'Make a claim',
                  subtitle: 'Follow these steps to submit a claim online.',
                  url: '/travel-insurance/how-to-make-a-claim'
                },
                {
                  id: 'help-centre',
                  title: 'Help centre',
                  url: '/help/travel',
                  subtitle: 'Get answers to frequently asked questions about travel insurance.'
                },
                {
                  id: 'emergency-assistance',
                  title: 'Emergency assistance',
                  url: '/travel-insurance/emergency-assistance',
                  subtitle: 'For when you need urgent help while travelling.'
                },
                {
                  id: 'partner-with-nib ',
                  title: 'Partner with nib ',
                  url: '/travel-insurance/partner-with-nib',
                  subtitle: 'nib travel insurance partners with businesses and travel agents across Australia.'
                }
              ]
            }
          ]
        },
        {
          id: 'ndis',
          title: 'NDIS',
          variation: 'megaMenu',
          callOut: {
            title: 'nib Thrive',
            description: 'Helping you navigate your NDIS plan with plan management support including prompt invoice payments and budget tracking.',
            primaryCta: {
              id: 'ndis-join',
              title: 'Join',
              url: '/thrive/join'
            },
            secondaryCta: {
              id: 'ndis-plan-management-login',
              title: 'Plan management login',
              url: 'https://gateway.nibthrive.com.au/home'
            }
          },
          children: [
            {
              id: 'ndis-plan-management',
              title: 'NDIS plan management',
              children: [
                {
                  id: 'ndis-plan-management-item',
                  title: 'NDIS Plan management',
                  url: '/thrive',
                  subtitle: 'Managing your NDIS budget, invoices and provider payments.'
                },
                {
                  id: 'contact-nib-thrive',
                  title: 'Contact nib Thrive',
                  url: '/thrive/contact-us',
                  subtitle: 'Get in touch with the nib Thrive team.'
                }
              ]
            },
            {
              id: 'resources-and-support',
              title: 'Resources and support',
              children: [
                {
                  id: 'help-and-support',
                  title: 'Help and Support',
                  url: '/help/thrive',
                  subtitle: 'Answers to common questions about the nib Thrive Portal, claims and more.'
                }
              ]
            }
          ]
        },
        {
          id: 'help',
          title: 'Help',
          url: '/help',
          positionRight: true
        },
        {
          id: 'login',
          title: 'Login',
          positionRight: true,
          variation: 'dropdown',
          children: [
            {
              id: 'login-health',
              title: 'Health insurance',
              url: 'https://my.nib.com.au/'
            },
            {
              id: 'login-travel',
              title: 'Travel insurance',
              url: 'https://www.nibtravelinsurance.com.au/account'
            },
            {
              id: 'login-ndis',
              title: 'NDIS plan management',
              url: 'https://gateway.nibthrive.com.au/'
            },
            {
              id: 'login-free',
              title: 'Free membership',
              url: '/free-membership'
            }
          ]
        }
      ]
    },
    footer: {
      footer: {
        mode: 'feature',
        footerLinks: {
          columns: [
            {
              groups: [
                {
                  id: 'footer-connect',
                  title: 'Connect',
                  children: [
                    {
                      id: 'contact-us',
                      title: 'Contact us',
                      url: '/contact-us',
                      icon: 'Conversation'
                    },
                    {
                      id: 'help-and-support',
                      title: 'Help and support',
                      url: '/help',
                      icon: 'Help'
                    },
                    {
                      id: 'find-a-provider',
                      title: 'Find a provider',
                      url: '/find-a-provider',
                      icon: 'Location'
                    },
                    {
                      id: 'feedback-and-complaints',
                      title: 'Feedback and complaints',
                      url: '/health-information/member-services/feedback-and-complaints',
                      icon: 'Error'
                    }
                  ]
                },
                {
                  id: 'download-app',
                  title: 'Download the nib App',
                  children: [
                    {
                      id: 'download-app-ios',
                      title: 'iTunes Store',
                      url: 'https://apps.apple.com/au/app/nib-health-insurance/id373883175',
                      targetBlank: true,
                      image: {
                        url: 'https://static.nib.com.au/images/common/apple-store-badge.svg',
                        alt: 'iTunes Store',
                        height: 48,
                        miniWidth: 120
                      }
                    },
                    {
                      id: 'download-app-android',
                      title: 'Google Play',
                      url: 'https://play.google.com/store/apps/details?id=au.com.nib&hl=en_AU',
                      targetBlank: true,
                      image: {
                        url: 'https://static.nib.com.au/images/common/google-play-badge.png',
                        alt: 'Google Play',
                        height: 48,
                        miniWidth: 135
                      }
                    }
                  ]
                }
              ]
            },
            {
              groups: [
                {
                  id: 'products',
                  title: 'Products',
                  children: [
                    {
                      id: 'health-insurance',
                      title: 'Health insurance',
                      url: '/health-insurance'
                    },
                    {
                      id: 'travel-insurance',
                      title: 'Travel insurance',
                      url: '/travel-insurance'
                    },
                    {
                      id: 'ndis-services',
                      title: 'NDIS services (Thrive)',
                      url: '/thrive'
                    },
                    {
                      id: 'life-insurance',
                      title: 'Life insurance and income protection',
                      url: '/life-insurance'
                    },
                    {
                      id: 'corporate-plans',
                      title: 'Corporate plans',
                      url: '/corporate-plans'
                    }
                  ]
                }
              ]
            },
            {
              groups: [
                {
                  id: 'helpful-links',
                  title: 'Helpful links',
                  children: [
                    {
                      id: 'our-company',
                      title: 'Our company',
                      url: '/about-us'
                    },
                    {
                      id: 'nib-foundation',
                      title: 'nib foundation',
                      url: '/foundation'
                    },
                    {
                      id: 'shareholders',
                      title: 'Shareholders',
                      url: '/shareholders/home'
                    },
                    {
                      id: 'for-providers',
                      title: 'For providers',
                      url: '/providers'
                    },
                    {
                      id: 'careers',
                      title: 'Careers',
                      url: '/careers'
                    },
                    {
                      id: 'media-centre',
                      title: 'Media centre',
                      url: '/media'
                    }
                  ]
                }
              ]
            },
            {
              groups: [
                {
                  id: 'legal-information-health',
                  title: 'Legal information (Health)',
                  children: [
                    {
                      id: 'changes-impact',
                      title: 'Changes that may impact you',
                      url: '/legal/changes-that-may-impact-you'
                    },
                    {
                      id: 'fund-rules',
                      title: 'Fund rules',
                      url: '/docs/fund-rules'
                    },
                    {
                      id: 'termns-conditions',
                      title: 'Terms and Conditions',
                      url: '/docs/online-terms'
                    },
                    {
                      id: 'code-of-conduct',
                      title: 'Code of Conduct',
                      url: '/legal#codeofconduct'
                    },
                    {
                      id: 'policy-booklet',
                      title: 'Policy booklet',
                      url: '/docs/policy-booklet'
                    }
                  ]
                },
                {
                  id: 'legal-information-travel',
                  title: 'Legal information (Travel)',
                  children: [
                    {
                      id: 'policy-hub',
                      title: 'Policy Hub',
                      url: '/travel-insurance/policy-hub'
                    },
                    {
                      id: 'family-violence-policy',
                      title: 'Family violence policy',
                      url: '/travel-insurance/family-violence-policy'
                    },
                    {
                      id: 'financial-hardship-support',
                      title: 'Financial hardship support',
                      url: '/travel-insurance/financial-hardships'
                    },
                    {
                      id: 'general-insurance-code',
                      title: 'General Insurance Code of Practice',
                      url: 'https://www.codeofpractice.com.au/'
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      smallFooter: {
        mode: 'feature',
        hideAcknowledgementOfCountry: false,
        copyright: 'Copyright © 2025 nib Group ABN 51 125 633 856',
        phoneNumber: '13 16 42',
        hidePhoneNumber: false,
        smallFooterLinks: [
          {
            title: 'Privacy policy',
            id: 'small-privacy-policy',
            url: '/legal/privacy-policy',
            targetBlank: true
          }
        ]
      }
    }
  }}
/>

Props

Prop	Type	Default	Description
`data` (required)	NavData		`data` is sourced through the API, but select attributes be overridden via the props listed in this table.
`containerWidth`	string or object		Sets the maximum width of the `Container`. Must be one of `narrow`, `default` or `wide`. Can be made responsive by passing an object of breakpoints.
`withContainer`	boolean	`true`	Toggles whether to restrict the width of the NavLayout’s subcomponent children. The max-width is set by the containerWidth prop. When false, the NavLayout’s subcomponent children will span the entire available viewport.
`phoneNumber`	string		An alternate phone number to be rendered in the Header and the smallFooter.
`hidePhoneNumber`	boolean		Toggles whether the phone number is rendered in the Header and smallFooter.
`headerVariation`	string		Renders the chosen variation of the HeaderBody. Must be one of `default`, `small` or `simplified`.
`hideCta`	boolean		Hides the CTA button, overriding the prop value supplied by the config.
`hideIconLinks`	boolean		Hides iconLinks in the headerBody and Drawer, overriding the prop value supplied by the config.
`cta`	`ItemType`		Allows overriding of the CTA button with a custom ItemType object.
`headerBodyMode`	`string`		Overrides the supplied (default) colour mode to the HeaderBody subcomponent.
`navBarMode`	`string`		Overrides the supplied (default) colour mode to the navBar subcomponent.

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 NavLayout's content and structure. In the case of the ServerNavLayout, the data is fetched internally. For the client NavLayout, you must provide the data prop with the necessary configuration. Regardless of how you use the NavLayout, the data structure is consistent and follows a specific format.

type NavData = {
  id: string;
  containerWidth: ContainerWidth;
  withContainer: boolean;
  header: HeaderData;
  footer: FooterData;
};

Note: Please refer HeaderData and FooterData for definition of respective types

Editing the global NavLayout data

The global navdata 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 configuration please raise a pull request in that repository.

Edit this page