Brief: Global Header Overview v. 0.1 [Block]
Component type | Header |
---|---|
Document status | IN REVIEW |
Design source (in Figma) | |
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 | 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.
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.
Wider Conversations that may impact this
Navigation Creation: Support for auto-generated vs manual curation.
Inspiration from elsewhere
New York Times (mobile/narrow view)
Examples
Useful links