Skip to content
Mesh
9.0.0

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

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.
variationstringarhiWhich version of the header/footer to use. One of arhi, nz, shareholders, international, foundation.
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.

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.