Make 'menu' text in header customisable

[hannalaakso]

What

Split out from #1682

The 'menu' text in the header navigation toggle button currently cannot be customised using the header Nunjucks macro. We intended to fix this in #1682, however doing so raises the issue of how should longer text in the menu button behave on smaller viewports (should the text wrap, move the button to a new line, how should the arrow in the button be aligned etc.)

I chatted with @christopherthomasdesign about this who thinks that there's potentially a couple of different scenarios to cover here which would create extra design and dev work.

I'm thinking that it would be good to see some use cases of services needing to use different text here to understand the use case properly.

Why

We might still want to do this but it would be good to triage it as a team.

Who needs to know about this

Chris, devs

[christopherthomasdesign]

Just adding a comment to illustrate the issue above and share a very brief bit of exploration into it.

The current header menu button works fine if the text says something short:

But breaks in its current configuration if you use longer text:

The obvious solution here would be to move the menu button to below the service name:

There are some drawbacks to this:

• it makes for quite a tall header on small screens (especially for services with long names and when you factor in things like cookie banners)
• as far as I'm aware, CSS doesn't let you position something absolute/block depending on how long it is, meaning that even menus with short text would need to be on a new line (see below)

Making all menu buttons appear on a new line would make all headers with menus taller. As far as I'm aware, the majority of services use 'menu' as the text for this button. So we could be making all headers bigger in order to accommodate a fairly niche use case.

We could do with finding out:

• do teams use text other than 'menu' for their mobile menus?
• what text do they use? is it ever as long as the examples above?
• how have they accommodated this text in their services?

[36degrees]

I think the use case we're trying to support is localisation of the interface, rather than allowing service teams to randomly use 'Navigation' or 'Show Menu'.

However on GOV.UK if you look at a localised page like https://www.gov.uk/cymraeg the header and footer remain in English currently. It'd be good to know if that is by design or because of technical constraints, and if there are any plans to try and localise the entire page including the header and footer.

I don't know if there any any services out there currently trying to localise the entire page.

[hannalaakso]

Thanks @36degrees you're right about this being more about localisation rather than random strings.

If we want to do this then I think Chris has illustrated well the problems for accommodating long text in the button - I wonder if one solution would be to have a class you add to the header if you know that you'll need to split the menu button onto a new line because your button content is long.

But yes agree with everyone about needing to understand whether this is something services actually need.

[hannalaakso]

It looks like the functionality for adding #1635 could be related, we should review it when starting work on this issue.

[hannalaakso]

I asked on x-gov #design and #govuk-design-system whether anyone had needed to localise or otherwise change the menu button text and didn't get any responses which makes me think this is low priority.

[vanitabarrett]

This came up in the Friday call today - Nat Carey mentioned that this comes up quite a lot as they have Welsh translations for almost all of their services, so things like this menu button and some of the hardcoded footer text does come up a fair bit.