'Header' component

Component type	Molecule
Component possible inclusions	n/a
Design source (in Figma)	Header component
Component status	https://rb-digital.atlassian.net/browse/DSD-115

Introduction

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.

Anatomy

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.

Editorial

See individual sub-components.

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.

Behavior

See individual sub-components.

Usage

Do’s

Use Header when you have a web page as part of a standard site (there are very few exceptions)

Don’ts

Don’t use Header 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).

Analytics & Data

See individual sub-components