Skip to content
Mesh
8.0.0

Header

The Header component is our primary page header. It should be used on all pages except for focused content and sales funnel pages which should use the Small Header component. When combining this component with the Footer component, use the Header Footer Layout component instead.

Headers should not be used as a standalone component

Headers should almost never be used as an standalone component as the full off-canvas pattern would still need to be constructed. Header Footer Layout should be used in most circumstances.

Installation

bash
npm install @nib-components/header

Note: You will also need to install the peerDependencies @nib-components/button and @nib-components/theme.

Usage

jsx
import Header, {SmallHeader} from '@nib-components/header';

Interactive demo

jsx

SmallHeader

jsx

Props

Header

PropTypeDefaultDescription
variationstringarhiWhich version of the header to use. One of arhi, nz, shareholders, international, foundation.
searchOnClickfunctionThe onClick function applied to the Search button in the header. If this is empty, the Search button will not be displayed.

SmallHeader

PropTypeDefaultDescription
variationstringWhich version of the small header to use. One of arhi, nz, shareholders, international, foundation.
logoLinkstringThe href value for the SmallHeader logo. Will override the url provided by the variation.
searchOnClickfunctionThe onClick function applied to the Search button in the small header. If this is empty, the Search button will not be displayed.
showMenubooleanfalseDetermines whether a menu button should be present in the header which opens an off-canvas drawer containing navigation items.

Considerations

By default, the Header while collapse to become the SmallHeader when below the width of the xl breakpoint (960px). The Navigation items from the Header will be passed down and used to populate the Drawer within the SmallHeader.

When using the standalone SmallHeader, consider the following usecases:

  • User flows that have a direct navigation path, such as sales funnels.
  • When content being displayed requires a user's focus.
  • For standalone marketing pages that do not require navigation.