Add current item indicator for header navigation #1067
Conversation
|
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? |
|
@paulrobertlloyd @anandamaryon1 I've updated this now so that it's merging into 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... |
|
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
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? |
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. |
|
@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? |
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. 👍 |
|
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. |
|
@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. |
|
@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). |
Removes the link to `"/"` labelled `"Home"`, which is currently hardcoded, and only shows up within the navigation menu on mobile screen widths. This link may not be appropriate for all services, which might not have a homepage, or might use a different path for it. It is also unclear whether having a homepage link is always needed in the navigation if the NHS logo also goes to the homepage.
paulrobertlloyd
force-pushed
the
header-breaking-changes
branch
from
f5a7da9 to
08add40
Compare
|
@anandamaryon1 @paulrobertlloyd mobile current item indicator bumped up to 8px in ae3aaba:
Possibly a bit too close to the text but maybe it’s just about passable? |
|
Current item indicator on the white header navigation variation changed from grey to blue in 74b72c8:
|
|
...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): 
|
@frankieroberto What about 6px? |
paulrobertlloyd
force-pushed
the
header-breaking-changes
branch
from
9ab62ce to
a1ee8c1
Compare
|
@paulrobertlloyd @anandamaryon1 6px looks better to me. Means not being able to use the spacing scale but in this instance that seems ok? Changed in 3dc45ab 
|
There was a problem hiding this comment.
Nice work, thank you @frankieroberto
One tiny thing I spotted reviewing this:
Focus state's black underline is being overriden by the current status indicator's blue
|
@anandamaryon1 well spotted! Fixed in 6cd2e33. It was caused by the ordering of CSS and the I think this should now be mergeable into the header breaking changes branch. |
This adds the new current and active boolean options for primaryLinks in the header added in #1067 to the documentation in the component README.
* Remove hardcoded Home link from navigation Removes the link to `"/"` labelled `"Home"`, which is currently hardcoded, and only shows up within the navigation menu on mobile screen widths. This link may not be appropriate for all services, which might not have a homepage, or might use a different path for it. It is also unclear whether having a homepage link is always needed in the navigation if the NHS logo also goes to the homepage. * Add 'Home' to examples * Use single path for NHS logo in header * Update CHANGELOG with updated SVG logo * Update SVG in README for header component * Format header styles with Prettier * Simplify template logic for header component * Allow transactional service name in header alongside navigation and search * Update CHANGELOG.md * Ensure logo in header appears for print media * Refactor header styles * Update header README to account for recent markup changes * Update backstop reference images for header component * Remove home link from header navigation * Change primaryLinks to use href and text instead of url and label (#1083) Change the primaryLinks in the Header component to use `href` and `text` param names instead of `url` and `label`. This improves consistency with other components. The previous param names are still supported for backwards-compatibility (but could be dropped in future) * Fix changelog merge * Fix CHANGELOG * Actually fix changelog * Add changelog item * Add current item indicator for header navigation (#1067) * Add current item indicator for header navigation 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). When displayed in the regular view within the blue header, the active links have a light-grey border at the bottom. When displayed in the expanded menu view (eg on mobile), they have a blue border to their left. * Remove custom class * Fix focus style on expanded menu item * Changed current item indicator in white nav to blue * Bump mobile current item indicator to 8px * Set current item in example header-org-white variant * Update backstop images * Fix * Bump mobile nav current idem indicator to 6px * Remove duplicate entries from changelog merge issues * Add entry to changelog * Update backstop images * Remove excess whitespace * Fix: focus link in white header should always have black border --------- Co-authored-by: Paul Robert Lloyd <me+git@paulrobertlloyd.com> * Describe the active and current arguments in header (#1098) This adds the new current and active boolean options for primaryLinks in the header added in #1067 to the documentation in the component README. * Update header navigation label (#1073) * Update header navigation label --------- Co-authored-by: Frankie Roberto <frankie@frankieroberto.com> Co-authored-by: anandamaryon1 <anandamaryon@gmail.com> * Show account information and links in the header (#1063) * Add account links to header * Don’t link to header example with custom HTML * Update backstop references for header component after adding account information to this component * Remove unused backstop images for header component * Add backstop images for header component with account links * tidy header examples * run prettier on header README * Update backstop refernece images * update changelog * edit account header rbac example placeholder * Enable inline styles in tests These are used by by the `header-account-custom-html` test, and I can't see a way to turn off the rule for just that one file... * Style fix * Fix Stylelint issues * Approve minor changes to backstop images * Add layout blocks from GOV.UK Frontend * Fix HTML validation moving `<style>` to head * Make justification of items in header navigation opt-in * Wrap header navigation items when JavaScript is not enabled * Add space between header navigation items using padding This prevents items appearing next to each other in browsers that do not support column-gap on flex containers and removes the need to use gap when calculating breakpoint widths in component JS. * Update backstop images to reflect left aligned navigation in header component * Update changelog to reflect left aligned navigation in header component * Support form submission from header account items * Update CHANGELOG to incluce header account features * Header breaking changes - update nunjucks params (#1109) This updates the params for the Header nunjucks component to no longer differentiate between 'transactional' and non-transactional services, and instead use the same Nunjucks params for both. Previously, for the 'non-transactional' service name type, the logo and the service name would be combined as a single link, but for 'transactional' services they would be separate. To preserve both options, some heuristics are used instead. The service name and logo links are combined in either of these 2 scenarios: * `logo.href` exactly matches `service.href` * `service.href` is specified but `logo.href` is unspecified We’d create some separate guidance on when to combine the logo and service names and when not to, although it will likely be context-dependent and up to teams to decide when to do this based on their research. This also removes the default link target of `/` for the service name and NHS logo. This allows you to have an option where neither the logo or service name are linked - although this would likely not be recommended. Finally, there’s also some smaller changes to the nunjucks params to make them more consistent and logical, such as changing `homeHref` to `logo.href`, `service.name` to `service.text` and `organisation.logoURL` to `logo.src`. ## Full list of Nunjucks changes | Before | After | |-----------------------------|-------------- | | `transactionalService.name` | `service.text` | | `transactionalService.href` | `service.href` | | `service.name` | `service.text` | | `organisation.logoURL` | `logo.src` | | `homeHref` | `logo.href` | ## Update HTML and CSS classes The HTML and CSS classes have been updated to more closely follow the Block Element Modifier (BEM) convention. The previous `nhsuk-header__link` and `nhsuk-header__link--service` have been removed and replaced with: | Element | CSS class | |--------------------------------|-------------------------------------| | Logo container | `.nhsuk-header__logo` | | Logo container (if there’s no service name sibling) | `.nhsuk-header__logo--no-service-name` | | Logo link | `.nhsuk-header__logo__link` | | NHS logo itself | `.nhsuk-logo` | | Service name container | `.nhsuk-header__service-name` | | Service name link | `.nhsuk-header__service-name__link` | --------- Co-authored-by: Colin Rotherham <work@colinr.com> * Ensure templating for header service logo and name is more readable Also fixes some layout issues resulting from updating options for logo and service name * Tidy up syntax for header component examples * Update header backstop images * .nhsuk-header__service-logo is always a link, so don’t need to check for href attribute * Remove conditionally added class previously used to left-align navigation items * fixes from merge, inc. swapping layout.njk to example.njk for header examples * update visual test images * Add word-break to account links and buttons to prevent long words from breaking the header * Update CHANGELOG.md Co-authored-by: Colin Rotherham <work@colinr.com> * Update CHANGELOG.md Co-authored-by: Colin Rotherham <work@colinr.com> * Update CHANGELOG.md Co-authored-by: Colin Rotherham <work@colinr.com> * Update CHANGELOG.md Co-authored-by: Colin Rotherham <work@colinr.com> * Update CHANGELOG.md Co-authored-by: Colin Rotherham <work@colinr.com> * remove self-closing / from img in org header * add overflow wrap to account header item, in addition to links and buttons * fix header primaryLinks href (from url) * tweak account header user icon svg, add file * tweak account header user icon svg * Move header-specific icon styles into header css. Add flex-shrink to user icon in header * Update reference images * Update reference images * Rename .nhs-logo to .nhsuk-header__logo * Rename .nhsuk-organisation-* to .nhsuk-header__organisation-* * Rename .nhsuk-header__navigation-item-active-fallback to .nhsuk-header__navigation-item-current-fallback * Rename .nhsuk-navigation-container to .nhsuk-header__navigation * Rename .nhsuk-navigation to .nhsuk-header__navigation-container * Move .nhsuk-header__drop-down and nhsuk-mobile-menu-container classes to .nhsuk-header__menu namespace * Rename .nhsuk-search__input to .nhsuk-header__search-input and nhsuk-search__submit to .nhsuk-header__search-submit * Rename .nhsuk-header--white-nav to nhsuk-header--white-navigation * Nest contain div element with navigation nav element * Align variables in header.js with updated class names * Re-order header styles * Use hidden attributes instead of classes to manage header menu visibility * Remove .nhsuk-header__search-wrap container * Use generic search element for header search container * Tidy up header component template * Update changelog with new header class names * Move header specific .nhsuk-icon__chevron-down styles into _header.scss * Remove JS enhancements from example * Remove `hidden` from toggle button The parent list item does the hiding for us * Append menu list after `hidden` attribute * Review feedback * Fix tests to use `hidden` attribute * Add support for older browsers * Update reference images * Set defaults before early return * Update reference images * Merge header variant SASS into single file (#1247) Co-authored-by: Colin Rotherham <work@colinr.com> * Update packages/components/header/README.md Co-authored-by: Colin Rotherham <work@colinr.com> * Move header changelog entry to unreleased * Update macro options for new header * Add search placeholder * Update base URL description * Update changelog * Change Health-Z to Health A to Z * Remove leading space * update changelog, remove snippets and point to service manual instead * Update reference images * Remove deleted header paths from test * Ensure focused search input in header renders consistently across breakpoints * Update visual regression tests for header search input * Add visual regression tests for focused header search input * Adjust magnifying glass optical alignment * Prefer input defaults where possible * Remove header search cancel button (WebKit, Blink, IE) * Fix non-rounded account outline in older Safari * Use higher contrast top border on white navigation * Update reference images * Update link colours and styles * Prefer "unlinked" * Fix 1px alignment issue * Override z-index only when necessary * Update reference images * Update changelog * Indentation and formatting * Remove duplicate skip links from examples * Fix alignment of toggle button icon * Replace header `primaryLinks` with `navigation.items` * Support classes and attributes on all `<nav>` elements * Consistent active items in examples * Move justified modifier class to navigation * Remove old reference images * Update reference images --------- Co-authored-by: Frankie Roberto <frankie@frankieroberto.com> Co-authored-by: Paul Robert Lloyd <me+git@paulrobertlloyd.com> Co-authored-by: Paul Robert Lloyd <paulrobertlloyd@users.noreply.github.com> Co-authored-by: Frankie Roberto <frankie.roberto1@nhs.net> Co-authored-by: Colin Rotherham <work@colinr.com>
Add support for indicating the current section, using either
current: true(if the user is currently on this exact page) oractive: 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