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';
|node||The contents of the page within the layout.|
|string||Which version of the header/footer to use. One of |
|node||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.|
|node||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.|
|boolean||Whether the layout should use the SmallHeader and SmallFooter components.|
|boolean||A pass-through prop to the |
|boolean||Whether the underlying |
|boolean||Use the corporate phone number from the variation config, if it exists. Otherwise use default.|
|boolean||Whether to apply the |
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
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.