Skip to content

Update dependency govuk-frontend to v6#914

Open
renovate[bot] wants to merge 1 commit into
masterfrom
renovate/govuk-frontend-6.x
Open

Update dependency govuk-frontend to v6#914
renovate[bot] wants to merge 1 commit into
masterfrom
renovate/govuk-frontend-6.x

Conversation

@renovate

@renovate renovate Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package Change Age Confidence
govuk-frontend (source) ^1.0.0 → ^6.0.0 age confidence

Release Notes

alphagov/govuk-frontend (govuk-frontend)

v6.2.0

Compare Source

To install this version with npm, run npm install govuk-frontend@6.2.0. You can also find more information about how to stay up to date in our documentation.

New features
Use @use to include GOV.UK Frontend styles in Sass

You can now include GOV.UK Frontend as a Sass module with @use or @forward.

@import was deprecated in Dart Sass v1.88.0, and the Sass team will remove it in Dart Sass v3.0.0.

We also plan to deprecate and eventually remove support for @import from GOV.UK Frontend in future releases.

We recommend you migrate to using Sass modules instead of @import everywhere in your Sass, unless your service depends on other Sass libraries that use @import. Mixing @use and @import can lead to duplicated CSS or configuration not being applied due to how Sass loads the included stylesheets.

To include all the styles from GOV.UK Frontend in your compiled stylesheet, replace @import with @use in your Sass file:

// Previously
@​import "node_modules/govuk-frontend/dist/govuk";

// Now
// Outputs GOV.UK Frontend's CSS (`@use`) and
// makes the Sass API available without namespacing (`as *`)
@​use "node_modules/govuk-frontend/dist/govuk" as *;

To configure any of GOV.UK Frontend's settings when including it in your Sass file, you should now use a with clause listing each setting you want to modify to your @use rule:

// Previously
$govuk-assets-path: "/path/to/assets/";
@​import "node_modules/govuk-frontend/dist/govuk";

// Now
@​use "node_modules/govuk-frontend/dist/govuk" as * with (
  $govuk-assets-path: "/path/to/assets/"
);

You can also include specific parts of GOV.UK Frontend using Sass.

See the GOV.UK Frontend documentation for more information on including GOV.UK Frontend in your Sass build.

We made this change in pull request #​6862: Migration to Sass modules.

Use shorter pkg: URLs to include individual files in Sass

You can now omit the dist/govuk part of the path when including GOV.UK Frontend in your Sass file with a pkg: URL:

// `@import` will soon be deprecated, so use`@use`
// Instead of `"pkg:govuk-frontend/dist/govuk/components/button"`
@​use "pkg:govuk-frontend/components/button";

[!WARNING]
If you're using @import with pkg: URLs there's a known issue with how Sass loads pkg: URLs with @import.

We recommend you either:

  • only use pkg: URLs with @use
  • make sure to include index.import in the URLs you import (for example: @import "pkg:govuk-frontend/index.import")

You should migrate any existing uses of @import with pkg: in your service.

We made this change in pull request #​6861: Resolve pkg: URLs from dist/govuk and update the review app.

Add custom classes and attributes to the File upload component's wrapper

We've introduced two new parameters to the File upload component's Nunjucks macro: wrapperClasses and wrapperAttributes.

These parameters allow you to define custom classes and HTML attributes for the wrapper of the improved version of the File upload component.

{{ govukFileUpload({
  javascript: true,
  wrapperClasses: "my-custom-class",
  wrapperAttributes: {
    "data-attribute": "value"
  }
}) }}

We made this change in pull request #​6933: Code improvements to File upload component.

Recommended changes
Rename the govuk-drop-zone class on the improved File upload component

We've changed the class name of the element that wraps the improved File upload component from govuk-drop-zone to govuk-file-upload-wrapper. govuk-file-upload-wrapper better describes what the element does.

We've now deprecated the previous class name and will remove it in the next major version of GOV.UK Frontend.

If you're using our Nunjucks macros, you do not need to update anything.

We made this change in pull request #​6933: Code improvements to File upload component.

Fixes
Error summary no longer outputs the styles for lists

The components/error-summary/_index.scss file was outputting CSS from core/lists, which is not part of the components layer. This was causing a duplication issue with Sass modules.

The components/error-summary/_index.scss file now only outputs the CSS for the Error summary component.

We made this change in pull request #​6975: Update index to use all layers and refactor core (again) to avoid duplicated CSS.

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v6.1.0

Compare Source

To install this version with npm, run npm install govuk-frontend@6.1.0. You can also find more information about how to stay up to date in our documentation.

New features
Use Sass functions to configure asset URLs

You can now use Sass functions from meta.get-function as well as strings to configure:

  • $govuk-image-url-function
  • $govuk-font-url-function

This will allow the variables to be configured when loading GOV.UK Frontend as a module once we support @use and @forward.

We made this change in pull request #​6767: Use Sass functions to configure asset URLs.

Recommended changes
Use <COMPONENT_NAME>/_index.scss to import individual components

We've deprecated each component's _<COMPONENT_NAME>.scss files, which let you import an individual component’s CSS using a single Sass import. We'll remove the _<COMPONENT_NAME>.scss files in the next major release.

If you were using the _<COMPONENT_NAME>.scss files, use the component's _index.scss file instead. For example:

// Previously
@&#8203;import "govuk/components/button/button";

// Now
@&#8203;import "govuk/components/button";

We made this change in pull request #​6761: Deprecate _<COMPONENT_NAME>.scss files.

Use color: govuk-functional-colour(text) to set the text colour

We've updated how the text colour changes to pure black when printing.

Previously, an additional print media query was included every time you used @include govuk-text-colour:

.my-element {
  color: var(--govuk-text-colour, #&#8203;0b0c0c);
}

@&#8203;media print {
  .my-element {
    color: var(--govuk-print-text-colour, #&#8203;000);
  }
}

Now, only one media query is included at the start of the compiled CSS, changing the value of the --govuk-text-colour custom property:

:root { --govuk-text-colour: #&#8203;0b0c0c; }

@&#8203;media print {
  :root { --govuk-text-colour: var(--govuk-print-text-colour, #&#8203;000); }
}

.my-element {
  color: var(--govuk-text-colour, #&#8203;0b0c0c);
}

This change allows you to simplify how the text colour is applied to your CSS rulesets.

Replace any instances of @include govuk-text-colour with color: govuk-functional-colour(text).

We'll remove the govuk-text-colour mixin in a future breaking release.

We made this change in pull request #​6427: Use custom properties to switch print text to pure black.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v6.0.0

Compare Source

To install this version with npm, run npm install govuk-frontend@6.0.0. You can also find more information about how to stay up to date in our documentation.

Breaking changes
Use Dart Sass v1.79.0 or later to compile your Sass stylesheets

GOV.UK Frontend no longer supports Ruby Sass, LibSass or versions of Dart Sass older than v1.79.0. Update your project to Dart Sass v1.79.0 or newer before updating to GOV.UK Frontend v6.0.

We made these changes in the following pull requests:

Update to the new type scale

We’ve applied the new type scale that was first introduced in GOV.UK Frontend 5.2.0 as an opt-in feature.

The type scale increases the size of text on small screens, improving legibility and accessibility.

We've also removed size 14 from the type scale. The smallest size in the type scale is now 16.

See the GOV.UK Design System website for an overview of the changes to the type scale.

You should test your service against the new type scale to see if you need to make any adjustments, particularly on small screens.

Stop using size 14 from the type scale

You'll now see an error when compiling your Sass if you pass $size: 14 to the govuk-font-size or govuk-font mixins.

Update your code to use a different size.

We made this change in pull request #​6417: Remove 14 from the type scale.

Stop using the govuk-body-xs and govuk-!-font-size-14 classes

Update your service to remove or replace references to the govuk-body-xs or govuk-!-font-size-14 classes.

We've removed these classes from GOV.UK Frontend.

We made this change in pull request #​6417: Remove 14 from the type scale.

Remove references to the $govuk-new-typography-scale feature flag

Remove any references to the $govuk-new-typography-scale feature flag from your code. We've now removed this feature flag.

We made this change in pull request #​6421: Turn the new type scale on by default.

Use GOV.UK brand colours

We’ve updated GOV.UK Frontend to use the GOV.UK web palette from v1.0 of the GOV.UK brand guidelines.

To improve colour contrast and legibility, we’ve also added:

  • 25% and 50% shades for all colours except brown
  • a 10% shade for blue

We’ve also made green and its tints and shades slightly darker.

A future version of the brand guidelines will contain these improvements.

Changes to colours in the GOV.UK web palette

The GOV.UK web palette in the brand guidelines reduces the number of named colours but introduces tints and shades for each colour. We've updated GOV.UK Frontend to use the same approach.

We’ve updated these colours:

Colour Previous colour Change
green #&#8203;00703c Updated to #&#8203;0f7a52
red #d4351c Updated to #ca3535
purple #&#8203;4c2c92 Updated to #&#8203;54319f
brown #b58840 Updated to #&#8203;99704a
pink #d53880 Renamed to magenta and updated to #ca357c
turquoise #&#8203;28a197 Renamed to teal and updated to #158187

We’ve removed these colours:

Colour Previous colour Suggested replacement
light-blue #&#8203;5694ca Blue tint 25% (exact match)
light-pink #f499be Magenta tint 50% (#e59abe)
light-green #&#8203;85994b Green tint 25% (#&#8203;4b9b7d)
dark-blue #003078 Blue shade 50% (#&#8203;0f385c)
light-purple #&#8203;6f72af Purple tint 25% (#&#8203;7f65b7)
bright-purple #&#8203;912b88 Magenta shade 25% (#&#8203;98285d)
dark-grey #&#8203;505a5f Black tint 25% (#484949)
mid-grey #b1b4b6 Black tint 80% (#cecece)
light-grey #f3f2f1 Black tint 95% (#f3f3f3)

We have not made any changes to black, white, blue, yellow or orange.

We made these changes in the following pull requests:

Check your service’s colours

If your service uses any custom components, make sure they still work with the GOV.UK web palette in terms of accessibility and design. Where possible, you should use colours from the GOV.UK web palette.

If you’re already using the govuk-colour function in your project, your service will automatically update to use the latest GOV.UK web palette.

If you're using a colour that we’ve renamed or that no longer exists, the govuk-colour function will log a warning and automatically return the suggested replacement.

Use the govuk-colour function to access tints and shades

The govuk-colour function now accepts a $variant option to access tints or shades of a colour.

If you do not set a$variant option, the govuk-colour function will return the primary variant of the colour.

For example:

$app-colour: govuk-colour('blue'); // Returns the 'Primary blue' colour

$component-colour: govuk-colour('red', $variant: 'tint-25') // Returns the 'Red tint 25%' colour

See the GOV.UK web palette on the GOV.UK Design System website for the list of available colours, tints and shades.

Stop using the $govuk-colours variable

We’ve removed the $govuk-colours variable from GOV.UK Frontend. Use the govuk-colour function to access colours from the GOV.UK web palette.

You can no longer override the colour palette in GOV.UK Frontend.

Stop using the govuk-tint and govuk-shade functions

We’ve removed the govuk-tint and govuk-shade functions for applying tints and shades to colours by percentage.

Replace them with tints and shades from the GOV.UK web palette that are as close as possible to the colours you were previously using.

We made this change in pull request #​6639: Remove govuk-tint and govuk-shade functions.

Update any light blue, turquoise or pink tags

The govuk-tag--light-blue colour modifier class for tags no longer exists. If you use tags of this colour, update them to use a different colour.

You’ll also need to replace:

  • govuk-tag--turquoise with govuk-tag--teal
  • govuk-tag--pink with govuk-tag--magenta

We'll remove the govuk-tag--turquoise and govuk-tag--pink modifier classes in a future breaking release.

We made this change in pull request #​6416: Deprecate turquoise and pink tag colour modifiers.

Use the new Sass API and CSS custom properties for functional colours

We’ve improved the way we reference colours for essential page elements in GOV.UK Frontend, renaming 'applied colours' to 'functional colours' and making them available as CSS custom properties.

Functional colours are colours playing a specific role in the user interface. For example, there are functional colours for the page background, text and links.

You can reference the custom properties for functional colours in your own CSS code, but do not assign new values to them.

Use govuk-functional-colour to access functional colours

The Sass variables for accessing functional colours are deprecated, and we’ll remove them in a future breaking release.

To make it easier for you to update, the Sass variables for accessing functional colours are still available. However, these variables now return a reference to a custom property, so you’ll get an error message if you have any code that expects a colour.

Update references to these variables to use the govuk-functional-colour function.

Deprecated Sass variable Replacement govuk-functional-colour call
$govuk-brand-colour govuk-functional-colour(brand)
$govuk-text-colour govuk-functional-colour(text)
$govuk-template-background-colour govuk-functional-colour(template-background)
$govuk-body-background-colour govuk-functional-colour(body-background)
$govuk-print-text-colour govuk-functional-colour(print-text)
$govuk-secondary-text-colour govuk-functional-colour(secondary-text)
$govuk-focus-colour govuk-functional-colour(focus)
$govuk-focus-text-colour govuk-functional-colour(focus-text)
$govuk-error-colour govuk-functional-colour(error)
$govuk-success-colour govuk-functional-colour(success)
$govuk-border-colour govuk-functional-colour(border)
$govuk-input-border-colour govuk-functional-colour(input-border)
$govuk-hover-colour govuk-functional-colour(hover)
$govuk-link-colour govuk-functional-colour(link)
$govuk-link-visited-colour govuk-functional-colour(link-visited)
$govuk-link-hover-colour govuk-functional-colour(link-hover)
$govuk-link-active-colour govuk-functional-colour(link-active)

We made these changes in the following pull requests:

Use $govuk-functional-colours to redefine functional colours

The deprecated Sass variables listed in the previous section are now read-only.

If you were customising a functional colour before importing GOV.UK Frontend, you'll now see a warning.

Update your code to assign a map of the colours you want to customise to the $govuk-functional-colours variable instead.

Use $govuk-output-custom-properties to control the output of custom properties in your CSS

If your service uses multiple stylesheets, you can use the $govuk-output-custom-properties setting to prevent custom properties (including the new custom properties for functional colours) from being included in your secondary stylesheets.

We made this change in pull request #​6606: Enable better control over custom property outputting.

Stop using the previous GOV.UK logo and colour palette

You should now only use the refreshed GOV.UK branding and remove any rebrand feature flags.

We’ve made the refreshed (blue-based) GOV.UK branding the default appearance of the GOV.UK header and GOV.UK footer components and removed the previous (mostly black) branding as an option.

We've also updated the colours used in the Service navigation and Cookie banner components.

With these changes, only services on the GOV.UK website should use the GOV.UK header and GOV.UK footer components. Services outside of the GOV.UK proposition should stop using the GOV.UK header and GOV.UK footer components and instead create their own.

If you’re using GOV.UK Frontend's Nunjucks template, you should now remove the govukRebrand feature flag.

If you’re using GOV.UK Frontend's Nunjucks macros without the template or have overridden the default header and footer components, you should remove the rebrand parameter from references to the govukHeader and govukFooter macros.

If you’re not using the Nunjucks template, remove the govuk-template--rebranded class from the <html> element and update the HTML for the icons, Open Graph image and theme colour to remove references to the rebrand folder.

<meta name="theme-color" content="#&#8203;1d70b8">
<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#&#8203;1d70b8">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/images/govuk-opengraph-image.png">

We made these changes in the following pull requests:

Stop using the St. Edward's Crown and useTudorCrown parameter

GOV.UK updated its logo to replace the St. Edward's Crown with the Tudor Crown in GOV.UK Frontend 5.1.0. The Tudor Crown became the default in GOV.UK Frontend 5.2.0, which is when we deprecated the option to switch between crowns.

We've now removed the GOV.UK header component's useTudorCrown parameter and assets relating to the St. Edward's Crown.

We made this change in pull request #​6414: Remove useTudorCrown parameter and St. Edwards crown assets.

Remove the rebrand feature flag from your prototype config

If you're using the GOV.UK Prototype Kit, remove the rebrand option from your prototype's app/config.json.

Changes to the page template

We’ve updated the options of the page template to provide consistent naming and functionality across the template.

These changes offer more flexibility in the template, with new Nunjucks variables and blocks to customise the <header>, <footer> and <main> elements. These new options allow you to:

  • add classes and attributes
  • override default content
  • insert content at the start or end of the blocks
Update Nunjucks blocks around the GOV.UK header

We've changed the page structure around the header to separate the header element (<header>) from the GOV.UK header component. This lets you include other components, such as the Service navigation and Phase banner components, within the header element of each page.

You’ll need to follow different instructions to upgrade, depending on how you create the page headers in your service. In all cases, you should make sure your page includes a single <header> element after you’ve made the changes.

If you’re using GOV.UK Frontend's template and are overriding the govukHeader component, replace references to the header Nunjucks block to use govukHeader.

{# Previously #}
{% block header %}
  {{ govukHeader() }}
{% endblock %}

{# Now #}
{% block govukHeader %}
  {{ govukHeader() }}
{% endblock %}

If you’re not using GOV.UK Frontend's template but are using the govukHeader component, update your template to include a <header> element around the component.

If you’re not using the header Nunjucks block at any point, or you're only using the block to remove it, you do not need to change anything.

If you’re not using Nunjucks, change the existing GOV.UK header to a <div> element and wrap it, along with any other header components, with a <header> element.

<header class="govuk-template__header">
  <div class="govuk-header">
    [...]
  </div>
  <div class="govuk-service-navigation">
    [...]
  </div>
</header>

We made this change in pull request #​6536: Refactor heading to detach element from component.

Use the container block to replace the width container

We've reduced the scope of the main block to only replace the <main> element,
rather than the whole <div class="govuk-width-container"> element.

If you were previously using the main block, use the new container block instead.

{# Previously #}
{% block main %}
  <!-- Your markup -->
{% endblock %}

{# Now #}
{% block container %}
  <!-- Your markup -->
{% endblock %}

We made this change in pull request #​6538: Make Page template options besides header and footer follow conventions.

Update Nunjucks blocks around the GOV.UK footer

We've changed the page structure around the footer to separate the <footer> element from the GOV.UK footer component. This lets you include other components within the footer element (<footer>) of each page.

You’ll need to follow different instructions to upgrade, depending on how you create the page footers in your service. In all cases, you should make sure your page includes a single <footer> element after you’ve made the changes.

If you’re using GOV.UK Frontend's template and overriding the govukFooter component, update references to the footer Nunjucks block to use govukFooter instead.

{# Previously #}
{% block footer %}
  {{ govukFooter() }}
{% endblock %}

{# Now #}
{% block govukFooter %}
  {{ govukFooter() }}
{% endblock %}

If you’re not using GOV.UK Frontend's template but are using the govukFooter component, update your template to include a <footer> element around the component.

If you’re not using the footer Nunjucks block at any point, or you're only using the block in order to remove it, you do not need to change anything.

If you’re not using Nunjucks, change the existing GOV.UK footer to a <div> element and wrap it with a <footer> element.

<footer class="govuk-template__footer">
  <div class="govuk-footer">
    [...]
  </div>
</footer>

We made this change in pull request #​6537: Refactor footer to detach element from component.

Customise the page template's <header> element

If you use Nunjucks, you can customise the appearance and content of the template's <header> element with new blocks and variables.

New variables:

  • headerClasses applies custom classes to the element
  • headerAttributes applies custom HTML attributes to the element

New Nunjucks blocks:

  • headerStart inserts HTML immediately after the element's opening tag, and headerEnd inserts HTML immediately before the element's closing tag
  • govukHeader lets you customise the govukHeader component without affecting other parts of the header

We made this change in pull request #​6536: Refactor heading to detach element from component.

Customise the <div class="govuk-width-container"> element

We've added new variables and blocks to allow you to further customise the <div class="govuk-width-container"> element.

The new containerAttributes variable applies custom HTML attributes to the element.

The new containerStart block inserts HTML immediately after the element's opening tag. The new
containerEnd block inserts HTML immediately before the element's closing tag.

We made this change in pull request #​6538: Make Page template options besides header and footer follow conventions.

Use mainAttributes to add attributes to the <main> element

We've added a new mainAttributes variable to apply custom HTML attributes to the <main> element.

We made this change in pull request #​6538: Make Page template options besides header and footer follow conventions.

Customise the template's <footer> element

If you’re using Nunjucks, you can customise the appearance and content of the template's <footer> element with new blocks and variables.

We’ve introduced the following new variables:

  • footerClasses applies custom classes to the element
  • footerAttributes applies custom HTML attributes to the element

We’ve introduced the following new Nunjucks blocks:

  • footerStart inserts HTML immediately after the element's opening tag
  • footerEnd inserts HTML immediately before the element's closing tag
  • govukFooter lets you customise the govukFooter component without affecting other parts of the footer

We made this change in pull request #​6537: Refactor footer to detach element from component.

We’ve now removed previously deprecated features
We’ve removed previously deprecated features from our Sass
Stop importing GOV.UK Frontend's Sass using all

We deprecated GOV.UK Frontend's all.scss file and partials in GOV.UK Frontend 5.8.0 and replaced them with equivalent Sass index files. We've now removed the all.scss files entirely.

We made this change in pull request #​6412: Remove all.scss file and partials.

Stop using the govuk-responsive-typography Sass mixin

We renamed the govuk-responsive-typography Sass mixin to govuk-font-size in GOV.UK Frontend 5.1.0. We've now removed the previous name entirely.

We made this change in pull request #​6387: Remove govuk-responsive-typography mixin.

We’ve removed previously deprecated features from the GOV.UK header component
Stop including the service name and navigation in the GOV.UK header component

We deprecated including the service name and navigation in the GOV.UK header component in GOV.UK Frontend 5.9.0.

We've now removed this functionality.

You should now use the Service navigation component for service names and service-level navigation.

We made this change in pull request #​6423: Remove service name and navigation from Header component.

Update the class on the GOV.UK logo link in the GOV.UK header component

We've updated the value of the class attribute on the link to the GOV.UK homepage to govuk-header__homepage-link.

If you're not using Nunjucks macros, you'll need to update this class manually.

<!-- Before -->
<a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
  [...]
</a>

<!-- After -->
<a href="//gov.uk" class="govuk-header__homepage-link">
  [...]
</a>

We made this change in pull request #​6423: Remove service name and navigation from Header component.

We’ve removed previously deprecated features from our colours
Stop using the $legacy parameter in the govuk-colour function

We’ve removed the $legacy parameter of the govuk-colour function, so you should remove any usage of it.

We made this change in pull request #​6326: Use brand palette through govuk-colour.

Stop using the $govuk-canvas-background-colour variable

We renamed $govuk-canvas-background-colour to $govuk-template-background-colour in GOV.UK Frontend 5.10.0. We've now removed the previous variable entirely. You should access the colour of the template background using govuk-functional-colour(template-background).

We made this change in pull request #​6413: Remove $govuk-canvas-background-colour.

Update to the latest organisation colour palette

We updated the organisation colour palette in GOV.UK Frontend 5.9.0.

The latest palette was initially opt-in, using the $govuk-new-organisation-colours feature flag. The latest palette is now the only palette available, so you must remove the feature flag from your code.

As part of this work, we removed the deprecated $websafe parameter of the govuk-organisation-colour function. Use the $contrast-safe parameter when calling the function instead.

We made this change in pull request #​6390: Remove legacy organisation colour palette.

Update references to deprecated organisations in the organisation colour palette

We've removed deprecated organisations from the organisation colour palette. These organisations had ceased to exist or had been renamed before 2025.

We made this change in pull request #​6426: Remove deprecated organisation colours.

Update references to the govuk-pagination__item--ellipses class in the Pagination component

We deprecated the govuk-pagination__item--ellipses class in GOV.UK Frontend 5.13.0, and we've now removed it.

If you're not using Nunjucks macros, you should update instances of this class to use the govuk-pagination__item--ellipsis class instead.

If you're using Nunjucks macros, you do not need to change anything.

We made this change in pull request #​6382: Remove deprecated govuk-pagination__item--ellipses class.

Stop using the element parameter of the Button component

We deprecated the element parameter of the Button component Nunjucks macro in GOV.UK Frontend 5.1.0, and we've now removed it.

The component is now output as a link if the href parameter is set. Otherwise, it's a button element.

We made this change in pull request #​6383: Remove element parameter from Button component.

We've removed other features we've previously deprecated
Remove references to the $govuk-show-breakpoints feature flag

The $govuk-show-breakpoints feature flag in GOV.UK Frontend 5.13.0 was only intended for use as a local development aid and not for production services, and we've now removed it.

Stop using the --govuk-frontend-breakpoint CSS custom properties

We renamed CSS custom properties starting --govuk-frontend-breakpoint to begin with --govuk-breakpoint in GOV.UK Frontend 5.11.0. We've now removed the previous names for these properties.

We made this change in pull request #​6385: Remove --govuk-frontend-breakpoint CSS properties.

Recommended changes
Use the govukSkipLink block instead of skipLink

We're deprecating the skipLink block and replacing it with a govukSkipLink block so all blocks replacing GOV.UK Frontend elements have the same name as the component's macro.

{# Previously #}
{% block skipLink %}
  {{ govukSkipLink()}}
{% endblock %}

{# Now #}
{% block govukSkipLink %}
  {{ govukSkipLink()}}
{% endblock %}

We made this change in pull request #​6538: Make Page template options besides header and footer follow conventions.

Use the containerStart block instead of beforeContent

We're deprecating the beforeContent block and replacing it with a containerStart block so all blocks adding content at the start of an element are named ...Start to make its name better match what it does.

We made this change in pull request #​6538: Make Page template options besides header and footer follow conventions.

Check that the GOV.UK logo links to the GOV.UK homepage

We've updated the default value of homepageUrl to point to the GOV.UK homepage.

The previous default value pointed at the root of the current domain. On services, this caused the GOV.UK logo to link to the homepage of the service, rather than the GOV.UK homepage.

Unless you operate a GOV.UK branded product, the GOV.UK logo should always link to the homepage of GOV.UK. Use the Service navigation component to provide a link to a local homepage.

We made this change in pull request #​6418: Update default homepageUrl to point to GOV.UK homepage.

Move any Phase banner components to the <header> element

We now recommend placing Phase banner components in the <header> element of the page.

If you're using GOV.UK Frontend's Nunjucks template and macros, create a headerEnd block and move the govukPhaseBanner macro into it.

{% block headerEnd %}
  {{ govukPhaseBanner({}) }}
{% endblock %}

If you're not using Nunjucks, move the Phase banner's HTML to before the </header> closing tag and add the govuk-width-container class to prevent the banner from stretching wider than the page's content.

<header class="govuk-template__header">
  <!-- Other header content -->
  <div class="govuk-phase-banner govuk-width-container">
    <!-- Phase banner content -->
  </div>
</header>

We made this change in pull request #​6546: Add govuk-width-container class to Phase banner component.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v5.14.0

Compare Source

New features
The GOV.UK footer component now allows the removal of content licence information

If your service does not provide information under the Open Government Licence (OGL), you can now remove the content licence information from the GOV.UK footer.

If you use Nunjucks, set the contentLicence parameter to null:

{{ govukFooter({
  contentLicence: null
}) }}

We introduced this feature in the following pull requests:

Recommended changes
Add aria-hidden="true" to the Service navigation's menu toggle

The VoiceOver screen reader software for macOS and iPadOS contains bugs that make the menu toggle in the Service navigation accessible to VoiceOver users, even if the button has a hidden attribute.

If you use Nunjucks, you do not have to do anything.

If you do not use Nunjucks to generate your components' HTML, add an aria-hidden="true" attribute to the hidden <button> element of the Service navigation. This means the button will remain hidden for VoiceOver users.

We made this change in pull request #​6469: Fix VoiceOver access to hidden Service Navigation menu button.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v5.13.0

Compare Source

New features
Use Sass functions to create custom media queries

We've added new Sass functions to help write @media and @container queries, mixins and functions whilst still using GOV.UK Frontend's $govuk-breakpoints setting.

You can create min-width and max-width queries using the govuk-from-breakpoint and govuk-until-breakpoint functions:

.element {
  color: red;

  @&#8203;media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
    color: blue;
  }
}

You can get the configured value of a breakpoint using govuk-breakpoint-value:

@&#8203;function wider-than-tablet($width) {
  @&#8203;return $width > govuk-breakpoint-value(tablet);
}

Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring @container queries.

$component-breakpoints: (
  small: 300px,
  medium: 500px,
  large: 750px
);

.element {
  color: red;

  @&#8203;container #{govuk-from-breakpoint(small, $component-breakpoints)} {
    color: blue;
  }
}

We've rewritten the internals of the govuk-media-query mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected.

We made these changes in the following pull requests:

Recommended changes
Rename ellipses HTML class in pagination to ellipsis

Within the pagination component, change the govuk-pagination__item--ellipses class to govuk-pagination__item--ellipsis.

We introduced this change in pull request #​5882: Rename ellipses html class to ellipsis. Thanks to @​frankieroberto for making this change.

Fixes

v5.12.0

Compare Source

New features
Use the govuk-focused-form-input mixin to style focus states for form inputs

You can now use the govuk-focused-form-input mixin to style the focus state in your own form input components.

Thanks to @​patrickpatrickpatrick for suggesting this change.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v5.11.2

Compare Source

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v5.11.1

Compare Source

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

v5.11.0

Compare Source

New features
The Service navigation component no longer uses a menu on mobile for a single link

If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a Menu toggle on mobile if there's only one navigation link.

You can control this behaviour using the new collapseNavigationOnMobile Nunjucks option.

If you're not using our Nunjucks macros, you can recreate this behaviour by omitting the Menu <button> element when there is only one navigation item.

We made this change in pull request #​6016: Don’t use menu for service nav with a single link.

Add inverse styling to Service navigation for use on product pages

If you enable the GOV.UK rebrand, you can now add the govuk-service-navigation--inverse class to the Service navigation component to use white links on a blue background.

This allows the rebranded GOV.UK header and Service navigation components to flow seamlessly with any following components that have a blue background, as is common on GOV.UK Digital Service Platform pages.

We made this change in pull request #​6015: Add inverse variant to Service navigation component.

You'll now see a deprecation warning if you're using LibSass

If you're using the deprecated LibSass library, you'll now see this deprecation warning when compiling your Sass:

It looks like you may be using LibSass to compile your Sass. LibSass is deprecated and will not be supported by the next major version of GOV.UK Frontend. See https://sass-lang.com/libsass/ for more information. To silence this warning, update $govuk-suppressed-warnings with key: "libsass"

We made this change in pull request #​5993: Warn if Sass is compiled using libsass.

Deprecated features

✂ Note

PR body was truncated to here.

Configuration

📅 Schedule: (in timezone Europe/London)

  • Branch creation
    • Between 04:00 PM and 07:59 PM, Monday through Friday (* 16-19 * * 1-5)
  • Automerge
    • Between 02:00 PM and 06:59 PM, Monday through Thursday (* 14-18 * * 1-4)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate Bot force-pushed the renovate/govuk-frontend-6.x branch from 14ee408 to e892096 Compare June 11, 2026 09:18
@lang-ben

lang-ben commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Check before merging as this update auto-triggers the GOV UK rebrand

@renovate renovate Bot force-pushed the renovate/govuk-frontend-6.x branch from e892096 to 5e51d37 Compare June 11, 2026 23:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

ns:ccd prd:ccd rel:ccd-admin-web-pr-914 Renovate Dependencies

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@lang-ben