Skip to content
Mesh icon
    DesignDevelopAnalyticsFeedback
    Stable

    Footer

    A Footer sits at the bottom of the page, providing additional links and content as a “catch-all” if a user cannot locate their desired information within the page content or Header navigation, or for persistent business-related requirements such as copyrights and acknowledgements, limited disclaimers or contact information. In Mesh, the Footer is a suite of subcomponents and prop variations, each tailored to a handful of navigation tasks and inclusions.

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

    Anatomy

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

    FooterBody

    footer body

    As a “catch-all”, the FooterBody is a configuration of links intended to provide a sense of direction for users who have not succeeded in finding relevant information in the page content (or Header navigation). The primary column (left-most in above example above) is designed to highlight higher priority user tasks in this situation, such as ‘Contact us’, or app store badges encouraging a user to install or utilise our native apps.

    Up to 3 columns of secondary links are also supported, providing access to content or information such as product categories, support and compliance documentation, or links relevant to atypical personas utilising the site (e.g. shareholders, providers, media, etc.). In custom applications or data configurations, these could also be used to highlight common user actions or relevant documentation.

    Each column supports multiple subgroups, with each subgroup and its category label being stacked vertically. Note, however, that no hierarchy is visually implied, other than stack order.

    The FooterBody’s layout is responsive, but prioritises the primary column across all breakpoints. Below lg breakpoint, the secondary links are stacked vertically, and below md are collapsed into an Accordion-like expanding menu.

    footer body lg screen footer body md screen

    In ‘focused’ environments, where a user’s ability to navigate out of the experience might be detrimental to its primary purpose or in-page content, the FooterBody can be hidden by the hideFooterBody prop (via prop selection or data config). This prop is intended to be utilised primarily in logged-in member experiences or dashboards, join flows, or internal applications.

    Acknowledgement of Country

    As part of nib’s Reconciliation Action Plan (RAP) initiatives, the Footer suite includes a dynamically-populated Acknowledgement of Country below the FooterBody. Relevant copy and links are provided for each supported brand, or hidden altogether based on the respective brands’ preferences. While we encourage our product teams and white-label partners to reflect and act upon their own reconciliation initiatives, a forceHideAcknowledgementOfCountry prop is provided to override the configured behaviour where it is contextually appropriate to selectively show or hide the Acknowledgement.

    aoc small screen aoc aoc text

    SmallFooter

    The SmallFooter is almost universally expected to be the last object rendered on a page. It typically provides copyright information, limited disclaimers, compliance-related links, and a phone number. When configured as part of the NavLayout, the phone number provided in the HeaderBody is displayed, unless configured otherwise.

    As a responsive component, this information is laid out according to the active breakpoint, with content being stacked vertically below lg.

    Even in ‘focused’ environments, this subcomponent is typically expected to be displayed for compliance and support purposes.

    small footer small footer lg screen

    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