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.


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


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

Interactive demo


Skip to content
nibnib logo
Page content here


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 button will be shown. Clicking this button triggers a Swifttype search interface.


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.