Design Tokens for Mesh have just been released!
Skip to content

Header Footer Layout

Header Footer Layout is the primary component used for headers and footers. It includes the global nib navigation and footer quicklinks, and should be the first choice for all pages.

Installation

bash
npm install @nib-components/header-footer-layout

Note: You will also need to install the peerDependencies @nib/icons, @nib-components/theme and also @nib/chatbot-launcher if you wish to use the nibby chatbot.

Usage

jsx
import HeaderFooterLayout from '@nib-components/header-footer-layout';

Interactive demo

HeaderFooterLayout

jsx

Props

PropTypeDefaultDescription
children (required)nodeThe contents of the page within the layout.
headerConfigobjectSpecify a custom configuration for the Header. See Header's config prop for more.
footerConfigobjectSpecify a custom configuration for the Footer. See Footer's config prop for more.
variationstringarhiWhich version of the header/footer to use. One of arhi, nz, shareholders, international, foundation, providers.
headernodeHeaderThe header component to use within the layout. This prop allows you to define a custom combination of Header/SmallHeader and Footer/SmallFooter in the layout.
footernodeFooterThe footer component to use within the layout. This prop allows you to define a custom combination of Header/SmallHeader and Footer/SmallFooter in the layout.
smallLayoutbooleanfalseWhether the layout should use the SmallHeader and SmallFooter components.
showSmallHeaderMenubooleanfalseA pass-through prop to the showMenu prop in the SmallHeader component to be used in conjunction with smallLayout. By default the small header footer layout shows no menu in the header. Set to true to use the config provided by the variation.
flexbooleanfalseWhether the underlying GrowLayout.Content should use CSS flex.
isCorporatebooleanfalseUse the corporate phone number from the variation config, if it exists. Otherwise use default.
invertSmallHeaderbooleanfalseWhether to apply the invert prop to the SmallHeader when it is displayed. This could be when smallLayout is true, or on any screen below the XL breakpoint.
withAbsoluteLinksbooleanfalseWhether or not header link urls should be absolute.
absoluteBaseUrlstringTo be used in conjunction with withAbsoluteLinks. Each variation has a default baseUrl in config. This is to override that default.
enableSearchbooleanfalseWhen enabled, a search icon link will be shown. Clicking this link will open the nib /search page.
hideHeaderPhoneNumberbooleanfalseWhether or not to render the phone number link in the Header.
hideSmallFooterPhoneNumberbooleanfalseWhether or not to hide the phone number in the small footer.
enableNibbybooleanfalseWhen enabled, the nibby launcher button will be shown fixed, in the bottom right hand corner of the screen.
nibbyOptionsobjectOptional config to pass through to the chatbot-launcher component. See chatbot-launcher docs for options.
forceHideAcknowledgementOfCountrybooleanfalseAn override to hide the AcknowledgementOfCountry, no matter the config, variation or brand.

Considerations

For sales funnels and landing pages that do not require the full navigation you should enable the smallLayout prop to use the layout with a SmallHeader and SmallFooter.

In certain cases, you may want a custom combination of Header/SmallHeader and Footer/SmallFooter, or a completely custom header of footer component. To achieve this, you can pass through the component you want in your layout down through the header and footer props.

The showSmallHeaderMenu only takes effect when used alongside the smallLayout prop. This prop will pass the showMenu prop down to the underlying SmallHeader component. Note that the menu is always included for the Header dropping down to the SmallHeader on smaller screens.

Responsive navigation

Our responsive solution is included as part of the Header. On screens below the XL breakpoint, the SmallHeader is displayed, with the primary navigation and contact links moved to an off-canvas drawer accessible via a Menu button in the header. Try resizing the interactive demo to see how the component behaves responsively.

The HeaderFooterLayout allows for a completely custom header or footer component to be used.

These components can be provided in a number of ways:

jsx
import HeaderFooterLayout from '@nib-components/header-footer-layout';
const CustomHeader = props => <header {...props}>My custom header</header>;
const App = () => (
<>
<HeaderFooterLayout header={CustomHeader} /> {/* 1 */}
<HeaderFooterLayout header={() => <CustomHeader id="custom-header-1" />} /> {/* 2 */}
<HeaderFooterLayout header={<header id="custom-header-2">My custom header</header>} /> {/* 3 */}
</>
);

When providing a component via method 1, relevant props from the HeaderFooterLayout are passed down to your custom header/footer. When providing a component via methods 2 and 3 props must be manually set on your custom JSX component.