Change primaryLinks to use href and text instead of url and label #1083
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
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?)
frankieroberto
requested review from
edwardhorsford,
anandamaryon1,
paulrobertlloyd and
vickytnz
|
Yes, been meaning to suggest this. Worth making the corresponding change to the footer component too? While we're at it, shall we change |
edwardhorsford
approved these changes
Nov 28, 2024
paulrobertlloyd
force-pushed
the
header-breaking-changes
branch
from
9ab62ce to
a1ee8c1
Compare
|
@edwardhorsford depends if we want to keep it backwards-compatible or not (currently in the PR it is). But I was thinking that this would go out with all the other Header changes in the next breaking change release – this PR is to merge into the other PR for that, #1058. |
|
I'll merge this into #1058 for now, and we can decide whether to keep the backwards-compatibility later. |
19 tasks
colinrotherham
added a commit
that referenced
this pull request
May 28, 2025
* 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently we have a mix of components which use
hrefandtextfor links (Action link, Back link, Breadcrumbs, Card, Contents list, Summary list, Skip link, Task list) and those which useurlandlabel(Header and Footer)This is pretty confusing, and caught me out again the other day.
Given we’re changing the Header component anyway, maybe now is the time to switch it over to
hrefandtextfor improved consistency?We could continue to support the old param names (as this PR current does) for backwards-compatibility, or drop them and advise people to switch over straight away?