Skip to main content

Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies

Release notes

Changelog and release notes for DWP Frontend

DWP Frontend is available on npm. Version history

5.1.1 (21 October 2026)

Bug fixes in v5.1.1

  • remove aria-label from both language toggle links, so each link's accessible name is its visible text, ‘Cymraeg’ or ‘English’. The Welsh link's old name was ‘Newid yr iaith ir Gymraeg’. It failed WCAG 2.5.3 Label in Name, because it did not include the word on screen

Notes on v5.1.1

axe-core 4.14.0 runs its Label in Name check (label-content-name-mismatch) by default. Earlier versions did not. If your service uses axe-core 4.14.0 or later, update to v5.1.1. Until you do, your tests will report the Welsh link as a failure.

In testing, we observed that voice recognition software still selected the Welsh link, so the risk to users looks small. We fixed it in the component so that each service does not have to investigate the same failure.

If your own tests check for the old aria-label values, update them.

The links now match the GOV.UK Language navigation component, in trial since GOV.UK Frontend 6.5.0 (August 2026). For English and Welsh, its HTML is almost the same as the DWP Language toggle component's. We first published that design in the Toggle to Welsh pattern in November 2021. It became a separate component in May 2024.

We plan to retire the DWP Language toggle component in favour of GOV.UK Language navigation. We will then update the Toggle to Welsh pattern to use the GOV.UK component. You can keep using the DWP component until we publish a retirement date. Moving means changing the macro and its options, but the HTML your users get will be almost the same.

To update, run npm i @dwp/dwp-frontend@latest.

5.1.0 (15 October 2026)

Features in v5.1.0

  • add the DWP crest as favicon.ico to the published package, and expose it automatically to GOV.UK Prototype Kit consumers via the plugin's assets configuration

Bug fixes in v5.1.0

  • declare govuk-frontend as a peerDependency (^6.0.0). Installing dwp-frontend into a project still on an older GOV.UK Frontend version now fails immediately with a clear dependency conflict at install time, instead of a confusing Sass compile error later

5.0.0 (13 October 2026)

BREAKING CHANGES in v5.0.0

  • rename .dwp-header-navigation__menu-button to .dwp-header__menu-button
  • rename the standalone navigation component's action param actionItem/action to endAction; rename its CSS modifier .dwp-header-navigation__item--action to .dwp-header-navigation__item--end-action

Bug fixes in v5.0.0

  • fix the internal service header's menu toggle overlapping the service name for long service names, on mobile, and at higher browser zoom/font-size settings

Notes on v5.0.0

v5.0.0 requires GOV.UK Frontend v6 or above. Check your project's GOV.UK Frontend version before updating. If it's still on v5, stay on your current version of dwp-frontend until you've upgraded, or installing v5.0.0 will fail to compile.

Update your CSS or JS if it targets .dwp-header-navigation__menu-button or uses the standalone navigation component's action param directly. Services using the header component normally (via dwpHeader, with no custom overrides) are unaffected beyond the GOV.UK Frontend requirement.

4.1.0 (20 May 2026)

Features in v4.1.0

A widened specification gives consuming services more flexibility in how to mark the currently selected item in our navigation components:

  • String — the existing behaviour, matches against href directly. No change for existing consumers.
  • Object with href — explicit href match, useful when you want to decouple the match value from the rendered link href.
  • Object with id — matches against the item's id attribute instead of its URL, so services that track navigation state by identifier rather than URL can highlight the correct item without needing the URL to match.

4.0.4 (8 May 2026)

Bug fixes in v4.0.4

  • aria-current XSS/accessibility bug — the navigation template was outputting aria-current=""true"" due to Nunjucks autoescaping. Fixed by moving to a Nunjucks if-block pattern.

4.0.3 (24 April 2026)

Bug fixes in v4.0.3

  • add @use sass:color to action-card partial and strip duplicate @use declarations in gulp Sass build

4.0.2 (24 April 2026)

Bug fixes in v4.0.2

  • fix mobile navigation toggle and sign-out visibility broken by govuk-frontend v6 removing Header JS component
  • replace deprecated .js-enabled with .govuk-frontend-supported in side-navigation
  • remove redundant @use sass:color from action-card partial

4.0.1 (17 April 2026)

Bug fixes in v4.0.1

  • add missing empty line before rule in action-card scss
  • replace deprecated darken() with sass:color module in UC action card

4.0.0 (15 April 2026)

BREAKING CHANGES in v4.0.0

  • upgrade govuk-frontend to v6.1.0
  • remove UC agent header and claimant header components

Features in v4.0.0

  • upgrade govuk-frontend to v6.1.0 and maintain compatibility with breaking changes
  • remove UC agent header and claimant header components

Notes on v4.0.0

v4.0.0 makes DWP Frontend compatible with GOV.UK Frontend v6.1.0. If you need compatibility with GOV.UK Frontend v6.1.0 you should update dwp-frontend to the latest version with the command npm i @dwp/dwp-frontend.

If you have not yet updated to GOV.UK Frontend v6.1.0 you should stay on your current version of dwp-frontend.

The agent header and claimant header components for Universal Credit designs were removed as they are no longer needed.

3.4.0 (9 October 2025)

Features in v3.4.0

  • isolate DWP components from GOV.UK rebrand styling and add conditional rebrand (visual) testing

Notes on v3.4.0

GOV.UK Frontend v5.10.0 introduced changes to the header, footer, cookie banner and service navigation components to support the 2025 GOV.UK brand refresh. (See Updating your service to use the new brand for details.)

The DWP Frontend internal service header and internal service footer previously inherited their colours from the GOV.UK, along with some other changes.

This affected the internal service header and internal service footer components from the DWP Design System, which inherited their colours from the GOV.UK components. In release 3.4.0 of DWP Frontend we have updated these components to:

  • fix the background colour of the internal service header component to black, rather than using the new GOV.UK blue
  • remove the blue accent bar above the internal service footer and fix the background colour to grey

To continue using these components with the correct colours you should update to DWP Frontend 3.4.0. Note that:

  • you may need to include an import to internal service footer Sass partial within your build: @import "node_modules/@dwp/dwp-frontend/components/internal-service-header/internal-service-header
  • if you have any tests that target the footer links by class name, you will need to update this class name

GOV.UK rebrand: what you need to do

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: