Add current item indicator for header navigation

[frankieroberto]

Add support for indicating the current section, using either current: true (if the user is currently on this exact page) or active: true (if the user is in that section but not necessarily that exact page). Both are styled the same but have different ARIA attributes.

When displayed in the regular view within the blue header, the active links have a light-grey border at the bottom, and no text underline:

When displayed in the expanded menu view (eg on mobile), they have a blue border to their left instead, and are slightly indented:

In addition, a <strong> tag wraps the current item text, to give some indication in any scenarios where CSS is unavailable - based on the GOVUK service navigation component.

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[frankieroberto]

I think this is a non-breaking change, and there aren’t any cross-dependencies on the header breaking change PR, so we could choose to either merge it in with those or ship it earlier as a minor release, depending on how things go?

[frankieroberto]

@paulrobertlloyd @anandamaryon1 I've updated this now so that it's merging into header-breaking-changes rather than main. @paulrobertlloyd looks like you've updated the header to use box-shadow instead of border-bottom for the black line on focus? I've updated the PR to set that to grey instead of the border now.

The 'current' item in the expanded menu is unchanged, using a blue box-shadow on the left. It does feel maybe a bit weird to use grey in one context and blue in the other, but then they're completely different designs so 🤷‍♂️? Possibly the expanded navigation would feel like more of a natural extension of the main navigation if it was also blue instead of white - but that'd be a much bigger change...

[davidhunter08]

Hey @frankieroberto, loving this work. I was just wondering do we know why the underlines were added to the nav items? The original nav didn't have underlines, I think they got added when the header was updated last year?! It feels a bit odd to me, and makes it a little harder to read, but maybe that's just me?

Other websites don't tend do underline nav items.

GOV.UK Design system

BBC

DAC

W3.org

While in-text links usually need an underline to help people with low vision or color blindness distinguish them from the surrounding text, this is not needed for links in menus if the menu can be clearly identified as such.
https://www.w3.org/WAI/EO/Drafts/tutorials/navigation/styling/

So it feels like if we have have evidence from users that underlines are needed on the main nav, then we should include them (and also feed that evidence back to gov.uk). But if we don't have any evidence, then maybe consider removing them again?

[frankieroberto]

Hey @frankieroberto, loving this work. I was just wondering do we know why the underlines were added to the nav items? The original nav didn't have underlines, I think they got added when the header was updated last year?! It feels a bit odd to me, and makes it a little harder to read, but maybe that's just me?

Good question. I’d be up for removing the underlines on the links in the nav. Don't know if @anandamaryon1 has any history on this?

[anandamaryon1]

Good question. I’d be up for removing the underlines on the links in the nav. Don't know if @anandamaryon1 has any history on this?

Hmm I've had a look around and can't find anything definitive… I can see from some documentation that in June 2022 the header still had underlines. But in November 2020 the (nhs.uk website) header had no underlines. 🤔

I can try to do more digging and ask around.

[anandamaryon1]

@frankieroberto how were you expecting the focus style to work on a current link? Currently the styling for the indicator overrides the focus style:

Should it instead be overridden by the focus style, so it looks like this? i.e. same as other links.

Or some custom style? Not sure that it's important to see visually that you're focussed on the current link?

[frankieroberto]

@anandamaryon1:

how were you expecting the focus style to work on a current link? Currently the styling for the indicator overrides the focus style:

Opps, thought I’d checked this. Might have got un-done when I updated from the header breaking changes branch and had to switch from border-bottom to the box-shadow. Fixed in 860df16. 👍

[anandamaryon1]

Wonder whether we should add some guidance around this in the service manual. I notice that the GOV service nav doesn't, but I think it could be useful to give an example to show it's an option and explain that there are two different aria labels. Anything else we'd wanna cover? Nunjucks macros may be enough if not.

[frankieroberto]

@anandamaryon1 agree to having some good guidance around it - the Nunjucks macro options are often missed.

What do you think to the thickness of the line at the bottom? I did wonder if it was too subtle and should be increased, but maybe it’s ok as is.

Not quite sure how this PR also picked up the task list changes - will try and unpick that.

[anandamaryon1]

@frankieroberto hmmI thought it was showing task list stuff because the header-breaking-changes branch was out of date with main so I updated it, but it's still showing them. Maybe swapping the base branch out and back again will fix it?

I feel the underline thickness is enough as it is, since it's breaks up such a big strong shape (the blue header).

[paulrobertlloyd]

Note

This branch had gotten corrupted with changes from main, whereas it’s a branch of header-breaking-changes. Rebased header-breaking-changes with main, and then rebased this branch of header-breaking-changes. I then merged the 3 previous commits in this PR into one. Make sure you pull these changes from each branch before making further changes.

Given the above, also updated the comments to be a bit shorter and use 80 chars. Also updated the current/active state for the mobile menu, using the same 4px line weight, and removing the padding (I thought this was a bug until I later read your comment @frankieroberto). Sorry, this was very naughty of me, but I was in the branches and couldn’t help but tinker 😊

Here’s what I’ve changed it to, can of course change back if we want:

[paulrobertlloyd]

I also updated the white header with navigation example to include an active item.

Here’s the active/current item style on the white header:

Which makes me wonder, should it also then be grey in the drop down menu, which shares the same colour palette (or conversely, should it be a blue border on the white header)?

[frankieroberto]

This branch had gotten corrupted with changes from main, whereas it’s a branch of header-breaking-changes. Rebased header-breaking-changes with main, and then rebased this branch of header-breaking-changes. I then merged the 3 previous commits in this PR into one.

@paulrobertlloyd thanks for sorting this! 👏 Originally I’d thought it’d be separate from the other header stuff so branched from main but switching the base branch then confused things.

Here’s what I’ve changed it to, can of course change back if we want:

Looks good! I had thought it might be too tight to fit it in the margin but it seems ok.

I’ve pushed a quick fix for focus style on the current item in the expanded menu, which was missing its black line at the bottom. See fd57863.

I did also have a play with making the expanded menu use the same colours - ie white on blue with the grey indicator for the current item and it does at least feel more consistent and like an extension of the main nav to me:

(Whether it needs border between each item or not I’m less sure on)

[edwardhorsford]

Glad to see this being added.

Stylistically I feel like the active item should have a larger grey border - it's very subtle right now.

I also think we'd probably want to change its colour for the white header - it's currently far too low contrast on white.

[anandamaryon1]

The white org header current indicator should be blue I think, the grey is too light.

The mobile indicator at 4px and no indent gets a bit lost, particularly on my phone which has a slightly rounded bevel. Maybe 8px will work?

Blue background for overflow menu, I'll have to take more of a look at, not sure about it. The logic makes sense, but it's a bigger change that probably should be separate from this PR.

[frankieroberto]

@anandamaryon1 @paulrobertlloyd mobile current item indicator bumped up to 8px in ae3aaba:

4px	8px

Possibly a bit too close to the text but maybe it’s just about passable?

[frankieroberto]

Current item indicator on the white header navigation variation changed from grey to blue in 74b72c8:

Grey	Blue

[frankieroberto]

...and just for good measure, here’s how it currently looks in the variant with the white header but the blue nav (which I only just discovered was an option):

[paulrobertlloyd]

Possibly a bit too close to the text but maybe it’s just about passable?

@frankieroberto What about 6px?