Add (web) header to the design system

[davidhunter08]

What

Update and document the (web) header on the NHS App design system with guidance and coded examples.

• Header - Global Navigation (Web) #18

Why

The current NHS App web header is using the old v7 nhsuk frontend header and not the latest v9.

By updating the header we can:

• be more aligned with the NHS service manual
• remove duplicate code form the app codebase.
• solve current usability issues

Documenting the header will provide developers with clear implementation guidance and designers with code to prototype, ensuring seamless collaboration across teams.

To do

• Decide on the web header approach... inside NHS.UK or standalone?
• Prototype new version of the web header

[davidhunter08]

Sketches from Mike...

Inside nhs.uk

Standalone

[davidhunter08]

Service manual team are working on a new version of a 'logged in' header...

nhsuk/nhsuk-frontend#1063

[davidhunter08]

Sketches from Mike...

Inside nhs.uk

### Standalone

Making the header 'standalone' would be a simpler approach and would negate the need for a sub-primary navigation.

[davidhunter08]

NHS design system discussion re: underlining links

[davidhunter08]

Design exploration

Exploring design options for the NHS App (web) header using the new NHS design system 'account information' header variant (without adding any custom code).

---

Option 1

Keep the nav IA the same as it is now with 'Help and support', 'Account and settings' and 'Log out' in the top section.

Desktop

Mobile

Mobile - expanded menu

---

Option 2

Remove 'Log out' so it matches the location in the app (Account and settings > Log out).

Desktop

Mobile

---

Option 3

Add icon to 'Account and settings'.

Desktop

Mobile

---

Option 4

Move 'Help and support' to the main nav.

Desktop

Mobile

---

Option 5

• Adding the users email address
• Moving 'account and settings' and 'help and support' to the main nav

Desktop

Mobile

[davidhunter08]

Option 6

Have all nav items at the same level.

Desktop

Mobile

[michaelgallagher]

option 6 might be most appropriate if things play out how i think/want them to play out in the current IA work

[michaelgallagher]

if we stay with the current IA, we might need something closer to version 3