Stable

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.

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

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

<HeaderFooterLayout variation="arhi">
  <div>Page content here</div>
</HeaderFooterLayout>

<HeaderFooterLayout variation="arhi">
  <div>Page content here</div>
</HeaderFooterLayout>

Props

Prop	Type	Default	Description
`children` (required)	node		The contents of the page within the layout.
`headerConfig`	object		Specify a custom configuration for the Header. See Header's `config` prop for more.
`footerConfig`	object		Specify a custom configuration for the Footer. See Footer's `config` prop for more.
`variation`	string	`arhi`	Which version of the header/footer to use. One of `arhi`, `nz`, `shareholders`, `international`, `foundation`, `providers`.
`header`	node	`Header`	The 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.
`footer`	node	`Footer`	The 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.
`smallLayout`	boolean	`false`	Whether the layout should use the SmallHeader and SmallFooter components.
`showSmallHeaderMenu`	boolean	`false`	A 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.
`flex`	boolean	`false`	Whether the underlying `GrowLayout.Content` should use CSS flex.
`isCorporate`	boolean	`false`	Use the corporate phone number from the variation config, if it exists. Otherwise use default.
`invertSmallHeader`	boolean	`false`	Whether 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.
`withAbsoluteLinks`	boolean	`false`	Whether or not header link urls should be absolute.
`absoluteBaseUrl`	string		To be used in conjunction with `withAbsoluteLinks`. Each variation has a default baseUrl in config. This is to override that default.
`enableSearch`	boolean	`false`	When enabled, a search icon link will be shown. Clicking this link will open the nib `/search` page.
`hideHeaderPhoneNumber`	boolean	`false`	Whether or not to render the phone number link in the Header.
`hideSmallFooterPhoneNumber`	boolean	`false`	Whether or not to hide the phone number in the small footer.
`enableNibby`	boolean	`false`	When enabled, the nibby launcher button will be shown fixed, in the bottom right hand corner of the screen.
`nibbyOptions`	object		Optional config to pass through to the chatbot-launcher component. See chatbot-launcher docs for options.
`forceHideAcknowledgementOfCountry`	boolean	`false`	An 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.

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.

Using custom header and/or footer

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.

Edit this page