Brief: Global Header Overview v. 0.1 [Block]

Component type	Header
Document status	IN REVIEW
Design source (in Figma)	Header Block
Author	@nathan.mckean@reckitt.com (Unlicensed)
Responsible

The (Global) Header is the key branding and navigational device that allows users to quickly understand where they are and the content that the site offers.

Use When

You have a web page as part of a standard site (there are very few exceptions)

Don’t Use When

There are political (e.g. cobranding or regulatory) justifications. In this instance, override the page with an alternative header (either simple header or no header) - not within MVP.

Related/Similar Components

The header is a composite component comprised of some or all of the following related components

Image (Logo)
Navigation (nested, primary, secondary, tertiary, utility - as relevant based on the navigation pattern)
Skip links / Skip menu

Key Content

Item	Type	Notes
Logo	image	Default and alternative versions will be included to cater for responsive variations.
Navigation links (primary, nested, utility, skip links)	Nested link list	The methodology of building navigation (manually or automated based on the site map) is yet to be discussed but should only impact the back end.

Visual Style

The first phase of the design system will deliver one single navigation pattern: a simple dropdown menu. Visualisation flexibility is via design token values only within MVP.

Wide viewport visualisation of chameleon navigation (search is not within MVP)

Narrow viewport (hamburger) approach to chameleon header.

Behaviour

See individual sub-components

Editorial

See individual sub-componentsX

Accessibility

The header must be wrapped within <header> landmarks for easy location
Skip links must be the first tab stop on the page.

Analytics & Data

See individual sub-components

Future Expansion

The first expansion beyond MVP will be to add site search support.
Alert boxes and site-wide teasers will be added to deliver legal, regulatory and promotional use cases.
Language selection will be added to toggle between multi-lingual site versions.
Headers may support country selection in combination with language selection (though this may equally be deferred to the footer.
Navigation will be expanded to support 3 tiers if and when the use case is encountered (most Reckitt websites are purposely flat in nature)
Navigation items will likely offer support for pictorial or iconographic visuals.
Shopping cart and log in functions will be enabled when eCommerce and Laoyaalty/membership functions are introduced.
Subsequent expansion of the system will deliver alternative navigation patterns such as a Split navigation (separate primary and secondary navigation as seen on Finish) and potentially a Mega-navigation.
Mega-navigation will introduce the opportunity and space (on wide viewports) to hero content and teasers alongside navigation.
Stylistically, (semi) transparent backgrounds are likely to be offered.
Behaviourally, “sticky” navigation is likely to be offered.

Design System