Skip to content
Design Tokens for Mesh have just been released!
Check out the design tokens now
Mesh icon
    DesignDevelopAnalyticsFeedback
    Stable

    Footer

    A Footer sits at the bottom of the page and provides persistent access to supporting links, brand information, legal policies, and contact options.

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

    Installation

    bash
    npm install @nib/nav-layout

    Usage

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

    For the server-side footer, you should use the ServerFooter component which has data-fetching built-in, as well as fallback data for when the API is unavailable.

    jsx
    import {ServerFooter} from '@nib/nav-layout/footer/server';
    

    const MyFooter = () => {
      return <ServerFooter />;
    };

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

    PropTypeDefaultDescription
    endpointstringhttps://api-gateway.nib.com.au/nav-data/v1/configThe URL from which to fetch the footer data.
    fetchOptionsobject{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 footer, you must ensure that the data is fetched either at build time or on the server. The global footer 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 footer data.

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

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

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

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

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

    jsx
    import {Footer} from '@nib/nav-layout/footer';
    import {footerData} from './data';
    

    const MyFooter = () => {
      return <Footer data={footerData} containerWidth="wide" hidePhoneNumber />;
    };
    jsx
    <Footer
  data={{
    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

    PropTypeDefaultDescription
    data (required)FooterDatadata is been sourced through api, but can be overriden through props. Refer the table below for prop information.
    containerWidthstring or objectSets the maximum width of the container. Must be one of narrow, default or wide. Can be made responsive by passing an object of breakpoints.
    withContainerbooleantrueWhether to restrict the footer contents to our standard container width.
    phoneNumberstringAn alternate phone number to render in the Footer.
    hidePhoneNumberbooleanWhether or not to render the phone number in the Footer.

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

    ts
    type FooterData = {
      footer: {
        mode?: string;
        footerLinks: FooterLink;
      };
      smallFooter: SmallFooterData;
    };
    

    type SmallFooterData = {
      data: SmallFooterData;
      containerWidth?: ResponsiveWidthProp;
      withContainer?: boolean;
      phoneNumber?: string;
      hidePhoneNumber?: boolean;
    };

    Data Attributes

    (click to expand)

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

    Edit this page