NHS.UK frontend v10.0.0 pre-release #1455
Replies: 17 comments 22 replies
-
|
I've not spotted any issues so far. Here's the pull request where I’ve been testing this on a prototype: NHSDigital/record-a-vaccination-prototype#364 |
Beta Was this translation helpful? Give feedback.
-
|
Useful feedback from @rowellx68 not realising Which found some GOV.UK Frontend log messages we haven't added yet:
I'm working on a PR for this |
Beta Was this translation helpful? Give feedback.
-
|
I've ported all the GOV.UK Frontend checks ready for review in: |
Beta Was this translation helpful? Give feedback.
-
|
I’ve not spotted any issues so far, here’s the PR where I’ve been testing this on the Mavis prototype: NHSDigital/manage-vaccinations-in-schools-prototype#108 |
Beta Was this translation helpful? Give feedback.
-
|
Here’s the draft pull request for updating the NHS prototype kit: nhsuk/nhsuk-prototype-kit#548 |
Beta Was this translation helpful? Give feedback.
-
|
Here’s draft pull request for updating the NHS Prototype kit guidance website: nhsuk/nhsuk.service-manual.prototype-kit.docs#297 |
Beta Was this translation helpful? Give feedback.
-
|
We've started testing with the v10.0.0 pre-release in our Manage breast screening service (prototype) |
Beta Was this translation helpful? Give feedback.
-
|
I've found a v10 specific issue when the Radios component is initialised late import { initRadios } from 'nhsuk-frontend'
// ✅ Init radios immediately
initRadios()
// ✅ Init radios on DOM ready
addEventListener('DOMContentLoaded', initRadios)
// ✅ Init radios on page load
addEventListener('load', initRadios)
// ❌ Init radios after page load
setTimeout(initRadios, 5000)We lacked test coverage for this so I've fixed that too in: |
Beta Was this translation helpful? Give feedback.
-
|
Upgrade went smoothly on our small service on screening. The only thing that was missing was the changes in PR-1305 as we use NHS CIS2 authentication we need the button to support a NHS logo within the button. |
Beta Was this translation helpful? Give feedback.
-
|
I've ended up removing the NHS logo from our CIS2 login button… I'm not sure the guidance regarding the login button is quite right when the context is it being used on an NHS website (opposed to a third-party product or service). In this instance, the rule is to only use NHS logo in the header. Probably some CIS2 guidance needs review or clarification. |
Beta Was this translation helpful? Give feedback.
-
|
It also contradicts the NHS brand guidelines which say: 
I suspect that the version of the Care Identity button with the NHS logo in it was designed more for non-NHS branded systems? |
Beta Was this translation helpful? Give feedback.
-
|
Hello - apologies this is an extremely slow response to this thread. Just want to confirm - that yes, you are correct Frankie - Care Identity button was initially designed with system suppliers in mind. Have had a chat with CIS2 PO and we're in agreement that we should follow the brand guidelines, so if on an internal system - omit the logo. We will review the CIS2 guidance and update. |
Beta Was this translation helpful? Give feedback.
-
|
@josiedo thanks! We’d like to copy some of the Care Identity button guidance to the Design System website, if that’s ok - as that's where a lot of designers will look for it, and we can include some coded examples. |
Beta Was this translation helpful? Give feedback.
-
|
Sounds great! Think that would be helpful, as I know we only have a download zip file of images on our site atm. Let me know when it's available, and we can review and add a link to the Design system from the cis2 guidance page also. Cheers! |
Beta Was this translation helpful? Give feedback.
-
|
@colinrotherham thats right I was able to use the code from 1305 to make it work. @paulrobertlloyd my understanding was the NHS login button does not need the NHS logo when used on an NHS service, not CIS? I'll double check with the CIS team. |
Beta Was this translation helpful? Give feedback.
-
|
Josie from CIS team is going to find out for us, I believe its on going discussion |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Ready to implement on the Mavis live service, once v10 is ready to release: NHSDigital/manage-vaccinations-in-schools#4005 |
Beta Was this translation helpful? Give feedback.
-
|
Brilliant, thanks @paulrobertlloyd If you could help assist with code reviewing #1486 that would be amazing We're due to get the next pre-release out, and great to have another service to test with Have you found a good way to get |
Beta Was this translation helpful? Give feedback.
-
|
Updated the announcement above with the v10.0.0-internal.1 release notes 🙌 |
Beta Was this translation helpful? Give feedback.
-
|
Looks good to me from NHS App side! We'll just need to finalise how we're aligning our header with the new design before we can bump across the app and our component library. (we're about to merge our v9 update, but keeping our v7 header styling with that) https://github.com/NHSDigital/nhsapp/compare/feature/nhso-0000-bump-nhsuk-frontend...feature/nhso-0000-nhsuk-frontend-v10 |
Beta Was this translation helpful? Give feedback.
-
|
Updated the announcement above with the v10.0.0-internal.2 release notes 🚀 Thanks @paulrobertlloyd for spotting a few issues in the last pre-release, but some other highlights:
|
Beta Was this translation helpful? Give feedback.
-
|
After upgrading from v10.0.0-internal.0 to v10.0.0-internal.1 I had an issue with the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for flagging this @adam-bell-nhs We're now sharing the GOV.UK Frontend code for checkboxes and radios. Their exclusive behaviour uses matching It's definitely an unintended regression so I'll see if we can resolve this |
Beta Was this translation helpful? Give feedback.
-
|
Hi @adam-bell-nhs, this issue is now resolved in v10.0.0-internal.3 Thanks again for reporting it |
Beta Was this translation helpful? Give feedback.
-
|
After upgrading to internal v10.0.0-internal.2 I needed to add some classes to both the header and footer as the formatting had changed. I needed to add nhsuk-width-container to the header and add footer class="nhsuk-footer" as the styles went a bit strange. |
Beta Was this translation helpful? Give feedback.
-
|
I think that would be beneficial :) it could have been an error on my side that I've missed it, but that would be brilliant if possible. |
Beta Was this translation helpful? Give feedback.
-
|
No problem at all, it's on our todo list What templating language are you using by the way? We'd love to chat more with maintainers of other NHS.UK frontend ports |
Beta Was this translation helpful? Give feedback.
-
|
Happy for you to pencil in some time if there's things you would like to discuss. We use node.js across some of our projects but the specific one I was testing with was using Java/Thymeleaf and HTML5. |
Beta Was this translation helpful? Give feedback.
-
That's great, is there a repo? Come and say hello on the #ui-working-group service manual Slack channel 👋 E.g. We're currently trialling a new way to verify HTML output in ports: Component fixturesFor all v10.x releases see the For example, browse to Nunjucks options in, HTML out: 
We're working with the Python (Jinja2) port at the moment: We're hoping to have every component render 1:1 with the same HTML output as part of the automated tests |
Beta Was this translation helpful? Give feedback.
-
|
That's really handy, thank you! I'll be sure to join the slack channel. |
Beta Was this translation helpful? Give feedback.
-
|
Updated the announcement above with the v10.0.0-internal.3 release notes 🚀 We've now added the JavaScript API from GOV.UK Frontend including base component classes Other highlights and thanks for:
|
Beta Was this translation helpful? Give feedback.
-
|
btw the HTML for the back link in the design system still includes the SVG, so now with the latest version adding the chevron |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @nicki-nhs, yeah the public guidance is still for v9.x We've got this comment at the top of the discussion to our v10.x which hopefully are good to go:
If you spot anything else please shout! Appreciate it |
Beta Was this translation helpful? Give feedback.
-
|
apologies, thought thats the one I was viewing but must have opened the v9 one too by mistake - sorry for the false alarm :D |
Beta Was this translation helpful? Give feedback.
-
|
Hopefully this our last update before we plan to release v10.0.0 next week I've updated the announcement above with the v10.0.0-internal.4 release notes 🚀 You can also see the proposed v10.0.0 changelog (consolidated) in: Highlights from this pre-release include:
Last of all, have we missed any thank you messages?
|
Beta Was this translation helpful? Give feedback.
-
|
Not forgetting (sorry) all the help from @jolumley-nhs, @malcolmbaig, @dnimmo and @rowellx68 too |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Any comments or feedback regarding the NHS.UK frontend v10.0.0 pre-release are welcome.
NHS service manual guidance for this release (see PR) is also in preview:
https://nhsuk-service-manual-pr-2192.herokuapp.com
10.0.0-internal.4 - 22 August 2025
💥 Breaking changes
Action link component changes
HTML markup for the action link component has been updated to remove the HTML wrapper. You do not need to do anything if you're using Nunjucks macros.
If you are not using Nunjucks macros, update your HTML markup to:
<div class="nhsuk-action-link"> </div><a class="nhsuk-action-link__link"class attribute to match<a class="nhsuk-action-link"🆕 New features
Reversed link style for action link
You can now use the action link component on dark backgrounds by using the
.nhsuk-action-link--reverseclass. Added in pull request #1542: Add reverse action link modifiers and styles.Sass colours as CSS custom properties
The Sass applied colour variables (e.g.
$nhsuk-link-colour) are now available as CSS custom propertiesFor example:
This change was introduced in pull request #1495: Output CSS custom properties from Sass colours.
🔧 Fixes
10.0.0-internal.3 - 15 August 2025
🆕 New features
Sass colour palette
nhsuk-colourfunctionThe Sass colour palette variables (e.g.
$color_nhsuk-blue) have been moved into a new single$nhsuk-coloursmap. The previous names are deprecated and will be removed in a future release.If you need to reference a colour within your application you should use the new
nhsuk-colourfunction:.nhsuk-example { - color: $color_nhsuk-blue; + color: nhsuk-colour("blue"); }This was added in pull request #1526: Add
$nhsuk-colourpalette, colour helpers and deprecate "color" spelling.Create individual components with
createAllWe've added a new
createAllfunction that lets you initialise specific components in the same way thatinitAlldoes.The
createAllfunction will:data-moduleattributeYou can also pass a config object and a scope within which to search for elements.
You can find out more about how to use the
createAllfunction in our documentation.This was added in pull request #1506: Add JavaScript configuration support to components.
🗑️ Deprecated features
Rename Sass variables, mixins and CSS classes to use "colour" spelling
We've renamed all Sass variables, mixins and CSS classes to use "colour" (not "color") spelling. You can still use the previous names but we'll remove them in a future breaking release.
Sass variables
For example, the following variables have been renamed:
$nhsuk-link-colorrenamed to$nhsuk-link-colour$nhsuk-link-hover-colorrenamed to$nhsuk-link-hover-colour$nhsuk-link-active-colorrenamed to$nhsuk-link-active-colour$nhsuk-link-visited-colorrenamed to$nhsuk-link-visited-colourSee pull request #1526 for the full list.
Sass mixins
The following mixins have been renamed:
nhsuk-print-colorrenamed tonhsuk-print-colournhsuk-text-colorrenamed tonhsuk-text-colourCSS classes
The following CSS classes have been renamed:
nhsuk-u-secondary-text-colorrenamed tonhsuk-u-secondary-text-colourThis was added in pull request #1526: Add
$nhsuk-colourpalette, colour helpers and deprecate "color" spelling.💥 Breaking changes
Colour variables that have been removed
Sass colour tint and shade variables (e.g.
$color_tint_nhsuk-black-10) have been removed but are available using thenhsuk-tintandnhsuk-shadefunctions:This change was introduced in pull request #1526: Add
$nhsuk-colourpalette, colour helpers and deprecate "color" spelling.Update back link component
HTML markup for the back link component has been updated to align with GOV.UK Frontend:
You do not need to do anything if you're using Nunjucks macros.
If you are not using Nunjucks macros, update your HTML markup using the back link examples in the NHS digital service manual.
This change was introduced in pull request #1515: Update back link and breadcrumb components.
Update breadcrumbs component
HTML markup for breadcrumbs component has been updated to better align with that used on GOV.UK and use back link styles for presentation on mobile:
Before:
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb"> <ol class="nhsuk-breadcrumb__list"> - <li class="nhsuk-breadcrumb__item"> + <li class="nhsuk-breadcrumb__list-item"> <a class="nhsuk-breadcrumb__link" href="#">Level one</a> </li> - <li class="nhsuk-breadcrumb__item"> + <li class="nhsuk-breadcrumb__list-item"> <a class="nhsuk-breadcrumb__link" href="#">Level two</a> </li> - <li class="nhsuk-breadcrumb__item"> + <li class="nhsuk-breadcrumb__list-item"> <a class="nhsuk-breadcrumb__link" href="#">Level three</a> </li> </ol> - <p class="nhsuk-breadcrumb__back"> - <a class="nhsuk-breadcrumb__backlink" href="#"> - <span class="nhsuk-u-visually-hidden">Back to </span> - Level three - </a> - </p> + <a class="nhsuk-back-link" href="#"><span class="nhsuk-u-visually-hidden">Back to </span>Level three</a> </nav>You do not need to do anything if you're using Nunjucks macros.
If you are not using Nunjucks macros, update your HTML markup using the back link examples in the NHS digital service manual.
This change was introduced in pull request #1515: Update back link and breadcrumb components.
Update icons
We have updated the design of some of our icons used in components. You do not need to do anything if you're using Nunjucks macros.
If you are not using Nunjucks macros, update your HTML markup if you are using any of the following components:
Action link
<div class="nhsuk-action-link"> <a class="nhsuk-action-link__link" href="#"> - <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="36" height="36"> - <path d="M0 0h24v24H0z" fill="none"></path> - <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path> - </svg> + <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" focusable="false" aria-hidden="true"> + <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/> + </svg> <span class="nhsuk-action-link__text">Find your nearest A&E</span> </a> </div>Do and don’t lists
<div class="nhsuk-do-dont-list"> <h3 class="nhsuk-do-dont-list__label">Do</h3> <ul class="nhsuk-list nhsuk-list--tick" role="list"> <li> - <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" width="34" height="34"> - <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></path> - </svg> + <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" focusable="false" aria-hidden="true"> + <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/> + </svg> cover blisters with a soft plaster or padded dressing </li> </ul> </div> <div class="nhsuk-do-dont-list"> <h3 class="nhsuk-do-dont-list__label">Don't</h3> <ul class="nhsuk-list nhsuk-list--cross" role="list"> <li> - <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34"> - <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z" fill="#d5281b"></path> - <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z" fill="#d5281b"></path> - </svg> + <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" focusable="false" aria-hidden="true"> + <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/> + </svg> do not burst a blister yourself </li> </ul> </div>Header
If you are using search, update the search submit icon:
If you are using an account link, update the user icon:
Pagination
<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination"> <ul class="nhsuk-list nhsuk-pagination__list"> <li class="nhsuk-pagination-item--previous"> <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="#"> <span class="nhsuk-pagination__title">Previous</span> <span class="nhsuk-u-visually-hidden">:</span> <span class="nhsuk-pagination__page">Treatments</span> - <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34"> - <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path> - </svg> + <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" focusable="false" aria-hidden="true"> + <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/> + </svg> </a> </li> <li class="nhsuk-pagination-item--next"> <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="#"> <span class="nhsuk-pagination__title">Next</span> <span class="nhsuk-u-visually-hidden">:</span> <span class="nhsuk-pagination__page">Symptoms</span> - <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34"> - <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path> - </svg> + <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" focusable="false" aria-hidden="true"> + <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/> + </svg> </a> </li> </ul> </nav>Primary card
<div class="nhsuk-card nhsuk-card--clickable"> <div class="nhsuk-card__content nhsuk-card__content--primary"> <h2 class="nhsuk-card__heading nhsuk-heading-m"> <a class="nhsuk-card__link" href="#">Introduction to care and support</a> </h2> <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p> - <svg class="nhsuk-icon" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false"> - <circle cx="13.333" cy="13.333" r="13.333" fill="" /> - <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667"> - <path d="M15.438 13l-3.771 3.771" /> - <path d="M11.667 9.229L15.438 13" /> - </g> - </svg> + <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" focusable="false" aria-hidden="true"> + <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z"></path> + </svg> </div> </div>This change was introduced in pull request #1521: Update component icons.
Check that your favicons, app icons and Open Graph image still work
We've changed the names, formats and sizes of icon assets we distribute in NHS.UK frontend. You will want to check that the correct files are copied in the right place and served at the right URLs.
The following files have been added to the assets folder:
The following folders have been removed from the assets folder:
If you're not using the Nunjucks page template, you will need to replace the list of icons in the template's head with the following:
You will need to update the file path to match your assets folder if it's not at the default location.
This change was introduced in pull request #1508: Update site icons and Open Graph image, add
manifest.json.♻️ Changes
Remove the X-UA-Compatible meta tag
Remove the
<meta http-equiv="X-UA-Compatible" content="IE=edge">meta tag from your page template.Internet Explorer versions 8, 9 and 10 included a feature that would try to determine if the page was built for an older version of IE and silently enable compatibility mode, modifying the rendering engine's behaviour to match the older version of IE. Setting this meta tag prevented that behaviour.
IE11 deprecated this meta tag and defaulted to always using IE11's renderer when the page has a HTML5 doctype (
<!DOCTYPE html>).As NHS.UK frontend no longer supports Internet Explorer versions older than 11, this meta tag can now be removed.
This change was made in pull request #1509: Remove
X-UA-Compatible meta tag.Update the viewport meta tag
We've updated our grid layout gutter margins to accommodate devices with "camera notches". Browsers on these devices reserve a safe area in landscape orientation (known as pillar-boxing) so content isn't obscured.
To avoid this, support has been added for
viewport-fit=coveras shown here:https://webkit.org/blog/7929/designing-websites-for-iphone-x/
This change was introduced in pull request #1510: Accommodate camera notches.
🔧 Fixes
clip-path()for plus and minus icons on details expandernhsuk-shadeandnhsuk-tint10.0.0-internal.2 - 24 July 2025
🆕 New features
New notification banner component
We’ve added a new notification banner component, ported from the GOV.UK Design System.
This was added in pull request #1408: Add notification banner component.
💥 Breaking changes
You must make the following changes when you migrate to this release, or your service might break.
Update footer component
The footer component's Nunjucks macros and HTML have been updated for better consistency and flexibility.
If you're using the
footerNunjucks macro in your service, you must:linksoption with the nestednavigation.itemsoption.metaLinksoption with the nestedmeta.itemsoption.labeltotextandURLtohref.Before:
After:
Or where additional columns
linksColumn2andlinksColumn3are currently used, wrap thenavigationobject in an array to support multiple columns:If you are not using Nunjucks macros, update your HTML markup using the footer examples in the NHS digital service manual.
This change was introduced in pull request #1452: Update footer to separate navigation from meta links, and use common parameters.
🔧 Fixes
10.0.0-internal.1 - 22 July 2025
💥 Breaking changes
You must make the following changes when you migrate to this release, or your service might break.
Add missing
data-moduleattributes to componentsYou do not need to do anything if you're using Nunjucks macros.
If you are not using Nunjucks macros, add the missing
data-moduleattributes to the following components' HTML:This change was introduced in pull request #1480: Add missing component
data-moduleattributes.Check that tabs components work as expected
The tabs component no longer triggers the
tab.showandtab.hidecustom events. Get in touch if you need to continue using these events.This change was introduced in pull request #1469: Remove deprecated code and legacy feature detection.
Check that details components work as expected
The details component no longer uses JavaScript, and is no longer polyfilled in older browsers.
If you have extended browser support requirements, check that the details component works as expected in older browsers.
This change was introduced in pull request #1460: Remove JavaScript from details component.
Check your browser console for component initialisation errors
NHS.UK frontend component JavaScript now provides errors if you initialise a component incorrectly.
These errors will be:
initAll()functionTo make sure the components behave as intended, we encourage you to check your browser console and address any errors by updating your markup or configuration.
Errors you might see include:
SupportError- when NHS.UK frontend is not supported in the current browserElementError- when component templates have missing or broken HTML elementsInitError- when components are initialised multiple timesThis change was introduced in pull requests #1459: Add NHS.UK frontend browser support checks, #1466: Throw
ElementErrorfor all missing elements and #1481: Prevent multiple initialisations of a single component instance.🆕 New features
*.d.mtsfor NHS.UK frontend🔧 Fixes
idbased onnamearia-describedbyon all form fieldsattributesoption on form groups$nhsuk-breakpointsoption10.0.0-internal.0 - 2 July 2025
This release introduces some breaking changes to file paths, full width buttons on mobile, the header component and others.
It also stops Internet Explorer 11 and other older browsers from running NHS.UK frontend JavaScript. Your service will not stop working in Internet Explorer 11, but components will look and behave differently without JavaScript.
You must read and apply these updates carefully to ensure your service does not break.
🆕 New features
New header with account section
We’ve updated the header component to support account information and links. As part of this work we’ve also made some other improvements to the header, detailed below:
roleandidattributes.This was added in pull request #1058: New header with account section.
Buttons are now full width on mobile
All buttons are now displayed at full width on mobile. This may not require any changes, but you should check that it does not break any of your layouts.
Buttons and links can also be grouped together so that they appear side-by-side on tablet and desktop by using a
<div class="nhsuk-button-group"> </div>container.This change was introduced in pull request #1309: Add button group and full width button styles
Create custom width container classes
You can now create custom page width container classes using the
nhsuk-width-containermixin. You do this by passing in the required maximum width of the container.For example:
You can use the generated classes to set the width of:
It was already possible to set the page app width with the
$nhsuk-page-widthvariable. This new feature is useful when creating additional custom page width classes.This change was introduced in #1412: Allow creating custom width containers
💥 Breaking changes
You must make the following changes when you migrate to this release, or your service might break.
Update file paths
To make sure NHS.UK frontend's files do not conflict with your code, we've moved our package files from
packagestodist/nhsuk.Make the following changes if they apply to your service:
Update Sass file paths
You must add
node_modulesto Sass load paths, by either:--load-path node_modulesflagloadPaths: ['node_modules']in theoptionsobjectReplace
packageswithdist/nhsukfor any@forward,@useor@importpaths in your Sass files, making sure to remove the unnecessarynode_modules/prefix:Update precompiled CSS file paths
For precompiled stylesheets, note the following path changes:
node_modules/dist/nhsuk/nhsuk-frontend.min.css– not the previous
node_modules/dist/nhsuk.min.cssstylesheetnhsuk-frontend-<VERSION-NUMBER>.min.cssfrom the GitHub release zip file– not the previous
css/nhsuk-<VERSION-NUMBER>.min.cssstylesheetUpdate precompiled JavaScript file paths
For precompiled JavaScript, note the following path changes:
node_modules/dist/nhsuk/nhsuk-frontend.min.js– not the previous
node_modules/dist/nhsuk.min.jsscriptnhsuk-frontend-<VERSION-NUMBER>.min.jsfrom the GitHub release zip file– not the previous
js/nhsuk-<VERSION-NUMBER>.min.jsscriptThen include the script before the closing
</body>tag of your page using thetype="module"attribute, and run theinitAllfunction to initialise all the components.Before:
After:
Update JavaScript file paths for bundlers
For JavaScript imported using a bundler, consolidate all
importorrequire()calls tonhsuk-frontend/packages/components/*into a single statement:Ensuring component initialisation functions match the named exports:
Or alternatively, you can initialise individual component classes:
Update Nunjucks file paths
nunjucks.configure()to search withinnode_modules/nhsuk-frontend/dist:Update file paths for copying or serving assets
Replace
packages/withdist/nhsukwhen copying or serving NHS.UK frontend logos, icons and other assets:For example, if you're using Express.js, request routing could be set up as follows:
Verify your code does not rely on polyfills we have now removed
We have removed polyfills
Array.prototype.includes,CustomEvent,Element.closest(),matches()DOM method and NodeList APIforEachrequired for Internet Explorer 11 and below.However, because these polyfills create or extend global objects ('polluting the global namespace'), you might have other code in your service unintentionally relying on the inclusion of these polyfills. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.
These changes were introduced in pull request #1326: Remove IE11 vendor polyfills.
Stop Internet Explorer 11 and other older browsers running unsupported JavaScript
Add
type="module"to all HTML<script>tags that include or bundle NHS.UK frontend.This is to stop Internet Explorer 11 and other older browsers running the JavaScript, which relies on features older browsers might not support and could cause errors.
Please note that
<script>withtype="module"runs JavaScript in a slightly different way than<script>withouttype="module". You'll need to assess the impact of these nuances and make sure that:<script>tag, you'll need to make sure it's usingtype="module"ordefer. This is because the tag loading NHS.UK frontend will be deferred because of itstype="module"attribute<script>tag withouttype="module"If your service has JavaScript you want to run successfully in Internet Explorer (for example JavaScript for analytics), you will need to load it in a separate
<script>tag withouttype="module"and make sure its code is compatible with the browsers it should run in (see previous section about polyfills).These changes were introduced in pull request #1260: Remove legacy browser support with
<script type="module">.Update the
<script>snippet at the top of your<body>tagPage templates now include a new
nhsuk-frontend-supportedclass on the<body>tag when NHS.UK frontend JavaScript components are fully supported.If you are not using our Nunjucks page template, replace the existing snippet:
with:
These changes were introduced in pull request #1327: Add class
.nhsuk-frontend-supportedfor ES modules support.Update header component params
If you're using the
headerNunjucks macro in your service, you must:transactionalServiceoption to the newserviceoption, and remove the booleantransactionaloption.primaryLinksoption with the nestednavigation.itemsoption, usingtextandhrefinstead oflabelandurl.searchActionoption with the nestedsearch.actionoption.searchInputNameoption with the nestedsearch.nameoption.showNavandshowSearchoptions. The respective parts of the header are now shown automatically whennavigation.itemsorsearchoptions are provided.classesoption fornhsuk-header--white-navand remove it. To turn the navigation white, add the modifier classnhsuk-header__navigation--whiteto the nestednavigation.classesoption.nhsuk-header__navigation-list--left-alignedmodifier class, navigation items are now aligned left by default.To restore the previous justified alignment, where navigation items appeared evenly spaced out, add the new
nhsuk-header__navigation--justifiedmodifier class to the nestednavigation.classesoption.Update header component HTML markup
If you are not using Nunjucks macros, update your HTML markup using the header examples in the NHS digital service manual.
Rename component
HTMLparam tohtmlIf you're using the
card,details,insetTextorwarningCalloutNunjucks macros, you need to rename theHTMLparam tohtml:{{ insetText({ - HTML: "<p>You'll need to stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>" + html: "<p>You'll need to stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>" }) }}This change was made in pull request #1259: Review legacy Nunjucks params.
Rename details component
textparam tosummaryTextIf you're using the
detailsNunjucks macro you need to rename thetextparam tosummaryText:{{ details({ - text: "Where can I find my NHS number?", + summaryText: "Where can I find my NHS number?", html: "<p>An NHS number is a 10 digit number, like 485 777 3456.</p>" }) }}This change ensures consistency with other components, where
textorhtmlparams are alternatives and cannot be used together. For example, when only text content is necessary:{{ details({ summaryText: "Where can I find my NHS number?", - html: "<p>An NHS number is a 10 digit number, like 485 777 3456.</p>" + text: "An NHS number is a 10 digit number, like 485 777 3456." }) }}This change was made in pull requests #1259: Review legacy Nunjucks params and #1398: Document details component
summaryTextandsummaryHtmlmacro options.Remove deprecated 24 point on the typography scale
The point 24 (24px large screens, 20px small screens) on the typography scale has been removed, after previously being deprecated in version 9.5.0.
Use either point 22 or point 26 instead.
This change was introduced in #1139: Remove 24px from typography scale
Remove the
nhsuk-button--disabledclass from buttonsWe've removed support for the
nhsuk-button--disabledclass.For the button component, remove any references to the
nhsuk-button--disabledclass.Use the
disabledHTML boolean attribute to mark<button>elements as being disabled instead.We no longer support link buttons being disabled or using disabled styles.
This change was introduced in #1075: Remove support for
nhsuk-button--disabledclassRemove deprecated Sass mixins and functions
We've removed the
govuk-main-wrapper(),govuk-main-wrapper--l()andgovuk-main-wrapper--s()Sass mixins we deprecated in NHS.UK frontend v9.5.0.Remove any use of these mixins in your own Sass. You must replace them with the
.nhsuk-main-wrapper,.nhsuk-main-wrapper--land.nhsuk-main-wrapper--sclasses in your HTML.If you're using the
nhsuk-grid-column()Sass mixin to create custom grid classes, you must remove the$classparameter:.app-grid-column-one-quarter-at-desktop { - @include nhsuk-grid-column(one-quarter, $at: desktop, $class: false); + @include nhsuk-grid-column(one-quarter, $at: desktop); }See the full list of previously deprecated features below:
Sass mixins
The following mixins have been removed:
govuk-exportsreplaced withnhsuk-exportsgovuk-grid-columnreplaced withnhsuk-grid-columngovuk-grid-rowreplaced with.nhsuk-grid-rowHTML classgovuk-shape-arrowreplaced withnhsuk-shape-arrowgovuk-width-containerreplaced withnhsuk-width-containergrid-widthreplaced withnhsuk-grid-widthSass functions
The following deprecated functions have been removed:
tintreplaced withnhsuk-tintshadereplaced withnhsuk-shadeiffreplaced with SassiffunctionThis change was introduced in #1409: Remove deprecated features marked for removal in v10.
See the NHS.UK frontend v9.5.0 and NHS.UK frontend v9.6.0 release notes for more details on previously deprecated features.
Update links in the error summary to the first checkbox or radio item
If you've linked from an error summary component to the first input in a radios or checkboxes component, the link may no longer work.
This is because the
idof the first checkbox or radio item no longer has the suffix-1when rendered using the Nunjucks macros.If you're using the
errorSummaryNunjucks macro, remove-1from the end of thehrefattribute:{{ errorSummary({ titleText: "There is a problem", errorList: [ { text: "Select how you like to be contacted", - href: "#contact-preference-1" + href: "#contact-preference" } ] }) }}You do not need to do this if you specified an
idfor the individual checkbox or radio item.This change was introduced in #1112: Remove the -1 suffix from radio and checkbox IDs
♻️ Changes
We've made changes to NHS.UK frontend in the following pull requests:
🔧 Fixes
value,disabledandformGroupparamsThis discussion was created from the release NHS.UK frontend v10.0.0-internal.2.
Beta Was this translation helpful? Give feedback.
All reactions